/* ==========================================================================
   BragDeals Homepage — integrates with ReHub CSS variables and classes.
   Cards use .priced_block / .price_count / .btn_offer_block / .grid_onsale
   so they pick up ReHub's button color, typography, and badge styles.
   ========================================================================== */

/* ── Scoped variables ── */
.bd-homepage {
	--bd-hot:     #E53935;
	--bd-gap:     12px;
	--bd-strip-w: 156px;
	font-family: var(--rehub-body-font, inherit);
}

/* ── Section wrapper ── */
.bd-section { margin: 0 0 28px; }

.bd-section__header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   12px;
}

.bd-section__title {
	margin:      0;
	font-size:   18px;
	font-weight: 700;
	color:       #111;
	font-family: var(--rehub-head-font, inherit);
	line-height: 1.3;
}
.bd-section--hot .bd-section__title { color: var(--bd-hot); }

.bd-section__more {
	font-size:       13px;
	font-weight:     600;
	color:           var(--rehub-main-color, #ff6b35);
	text-decoration: none;
	white-space:     nowrap;
	flex-shrink:     0;
	margin-left:     12px;
}
.bd-section__more:hover { text-decoration: underline; }

/* ==========================================================================
   HORIZONTAL SCROLL STRIP
   ========================================================================== */

.bd-scroll-strip {
	display:                    flex;
	gap:                        var(--bd-gap);
	overflow-x:                 auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type:           x mandatory;
	scroll-behavior:            smooth;
	padding-bottom:             8px;
	margin-left:  calc(var(--bd-gap) * -0.5);
	margin-right: calc(var(--bd-gap) * -0.5);
	padding-left:  calc(var(--bd-gap) * 0.5);
	padding-right: calc(var(--bd-gap) * 0.5);
}
.bd-scroll-strip::-webkit-scrollbar        { height: 3px; }
.bd-scroll-strip::-webkit-scrollbar-track  { background: transparent; }
.bd-scroll-strip::-webkit-scrollbar-thumb  { background: rgba(0,0,0,.18); border-radius: 4px; }

/* ==========================================================================
   STRIP CARD  (.bd-card--strip)
   ========================================================================== */

.bd-card--strip {
	flex:              0 0 var(--bd-strip-w);
	width:             var(--bd-strip-w);
	background:        #fff;
	border:            1px solid rgba(159,159,159,0.35);
	border-radius:     4px;
	scroll-snap-align: start;
	box-shadow:        0 2px 8px rgba(0,0,0,0.08);
	transition:        transform 0.2s ease, box-shadow 0.2s ease;
	display:           flex;
	flex-direction:    column;
}
.bd-card--strip:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform:  translateY(-2px);
}

/* Shared image wrapper — overflow:hidden here so card itself can overflow for popups */
.bd-card__img-link {
	position:      relative;
	display:       block;
	overflow:      hidden;
	border-radius: 4px 4px 0 0;
}

.bd-card__img {
	position:    relative;
	width:       100%;
	padding-top: 100%;
	overflow:    hidden;
	background:  #f0f0f0;
}
.bd-card__img img {
	position:   absolute;
	top: 0; left: 0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}
.bd-card__no-img {
	position:   absolute;
	top: 0; left: 0;
	width:      100%;
	height:     100%;
	background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

/* Strip card body — overrides .priced_block defaults for compact layout */
.bd-card--strip .priced_block {
	padding:        8px;
	display:        flex;
	flex-direction: column;
	gap:            5px;
	flex:           1;
	clear:          none;
	margin:         0;
}
/* Prices row: sale price + original strikethrough */
.bd-card__prices {
	display:     flex;
	align-items: baseline;
	gap:         5px;
	flex-wrap:   wrap;
}
.bd-orig-price {
	font-size:       11px;
	color:           #999;
	font-weight:     normal;
	text-decoration: line-through;
}

/* Discount badge — yellow/gold rectangular label with soft corners */
.bd-sale-badge {
	position:       absolute;
	top:            6px;
	left:           6px;
	z-index:        2;
	background:     #FFD700 !important;
	color:          #333 !important;
	font-size:      11px !important;
	font-weight:    400 !important;
	line-height:    1.4;
	padding:        3px 8px !important;
	border-radius:  4px !important;
	letter-spacing: 0.02em;
	pointer-events: none;
	display:        inline-block !important;
}

/* Strip card price + button */
.bd-card--strip .price_count {
	font-size:   14px !important;
	font-weight: 400 !important;
	color:       #333 !important;
	line-height: 1.2;
}
.bd-card--strip .btn_offer_block {
	font-size:        12px !important;
	font-weight:      400 !important;
	line-height:      14px !important;
	padding:          5px 8px !important;
	text-transform:   none !important;
	text-align:       center;
	margin-top:       auto;
	display:          block !important;
	float:            none !important;
	background-color: var(--rehub-main-btn-bg, #ff6b35);
	border-radius:    4px;
}
.bd-card--strip .btn_offer_block:hover { opacity: .88; }

/* ==========================================================================
   DEALS GRID
   .col_wrap_fourth is ReHub's class; we override its float layout with CSS
   Grid inside .bd-homepage so cards are equal height.
   ========================================================================== */

.bd-homepage .col_wrap_fourth {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   14px;
	margin-bottom:         24px;
	overflow:              visible;
}
.bd-homepage .col_wrap_fourth .col_item {
	float:  none;
	width:  auto;
	margin: 0;
}

/* Grid card appearance */
.bd-grid-card {
	background:     #fff;
	border:         1px solid rgba(159,159,159,0.35);
	border-radius:  4px;
	box-shadow:     0 2px 8px rgba(0,0,0,0.08);
	transition:     transform 0.2s ease, box-shadow 0.2s ease;
	display:        flex;
	flex-direction: column;
	height:         100%;
	position:       relative;
}
.bd-grid-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform:  translateY(-2px);
}

.bd-grid-card .bd-card__body.priced_block {
	padding:        10px;
	display:        flex;
	flex-direction: column;
	gap:            8px;
	flex:           1;
	clear:          none;
	margin:         0;
}
.bd-grid-card .bd-card__title {
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	font-size:          13px;
	font-weight:        400;
	color:              #333;
	text-decoration:    none;
	line-height:        1.4;
}
.bd-grid-card .bd-card__title:hover { color: var(--rehub-main-color, #ff6b35); }

/* 15-word product description snippet */
.bd-grid-card .bd-card__desc {
	font-size:          12px;
	font-weight:        400;
	color:              #666;
	line-height:        1.4;
	margin:             0;
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.bd-grid-card .price_count {
	font-size:   15px !important;
	font-weight: 400 !important;
	color:       #333 !important;
	line-height: 1.3;
}
.bd-grid-card .btn_offer_block {
	display:          block !important;
	float:            none !important;
	font-weight:      400 !important;
	text-align:       center;
	margin-top:       auto;
	background-color: var(--rehub-main-btn-bg, #ff6b35);
}
.bd-grid-card .btn_offer_block:hover { opacity: .88; }

/* ==========================================================================
   AD SLOTS
   ========================================================================== */

.bd-ad-slot {
	margin:      0 auto 28px;
	text-align:  center;
	overflow:    hidden;
	line-height: 0;
}
.bd-ad-slot:empty { display: none; }
.bd-ad-slot--after-hot-strip,
.bd-ad-slot--bottom-banner  { max-width: 728px; }
.bd-ad-slot--mid-categories  { max-width: 336px; }

@media (max-width: 767px) {
	.bd-ad-slot--after-hot-strip,
	.bd-ad-slot--bottom-banner { max-width: 320px; }
}

.bd-ad-slot--placeholder:empty {
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-height:      90px;
	background:      #f9f9f9;
	border:          2px dashed #ddd;
	border-radius:   4px;
	color:           #bbb;
	font-size:       12px;
	font-family:     sans-serif;
}
.bd-ad-slot--placeholder:empty::before {
	content: attr(aria-label) ' — Ad slot (empty)';
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Grid columns */
@media (max-width: 900px) {
	.bd-homepage .col_wrap_fourth { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.bd-homepage .col_wrap_fourth { grid-template-columns: repeat(2, 1fr); }
}

/* Strip card sizing */
@media (min-width: 900px) {
	.bd-homepage {
		--bd-strip-w: 178px;
		--bd-gap:     16px;
	}
	.bd-section__title { font-size: 20px; }
}
@media (min-width: 1200px) {
	.bd-homepage { --bd-strip-w: 192px; }
}

/* ==========================================================================
   CARD ACTIONS — like + share row
   ========================================================================== */

.bd-card__actions {
	display:      flex;
	align-items:  center;
	gap:          8px;
	padding-top:  8px;
	border-top:   1px solid rgba(0,0,0,0.06);
	margin-top:   2px;
}

/* Like button — hooks into ReHub's .thumbplus / hotcount.js system */
.bd-like-wrap {
	display:     flex;
	align-items: center;
	gap:         4px;
}
.bd-like-wrap .thumbplus {
	width:       22px !important;
	height:      22px !important;
	line-height: 22px !important;
	font-size:   0.8em !important;
}
.bd-like-wrap .thumbscount,
.bd-like-wrap .bd-like-count {
	font-size:   11px;
	color:       #999;
	min-width:   10px;
	font-weight: 400;
}

/* Share button */
.bd-share-wrap { position: relative; margin-left: auto; }

.bd-share-btn {
	background:      none;
	border:          1px solid rgba(0,0,0,0.18);
	border-radius:   50%;
	width:           26px;
	height:          26px;
	padding:         0;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #888;
	transition:      border-color 0.2s, color 0.2s;
	flex-shrink:     0;
}
.bd-share-btn:hover {
	border-color: var(--rehub-main-color, #ff6b35);
	color:        var(--rehub-main-color, #ff6b35);
}

.bd-share-popup {
	position:       absolute;
	bottom:         calc(100% + 8px);
	right:          0;
	background:     #fff;
	border:         1px solid rgba(0,0,0,0.12);
	border-radius:  6px;
	box-shadow:     0 4px 20px rgba(0,0,0,0.14);
	padding:        6px;
	min-width:      148px;
	z-index:        200;
	display:        flex;
	flex-direction: column;
	gap:            2px;
}
.bd-share-popup[hidden] { display: none !important; }

.bd-share-popup a,
.bd-share-popup .bd-copy-link {
	display:         block;
	width:           100%;
	padding:         7px 10px;
	font-size:       12px;
	font-weight:     400;
	color:           #333;
	text-decoration: none;
	border-radius:   4px;
	background:      none;
	border:          none;
	cursor:          pointer;
	text-align:      left;
	line-height:     1.4;
	box-sizing:      border-box;
}
.bd-share-popup a:hover,
.bd-share-popup .bd-copy-link:hover { background: #f5f5f5; color: #111; }
.bd-share-popup .bd-copy-link.bd-copied { color: #4caf50; }

/* Strip card compact actions */
.bd-card--strip .bd-card__actions { padding-top: 6px; gap: 6px; }
.bd-card--strip .bd-like-wrap .thumbplus {
	width:       20px !important;
	height:      20px !important;
	line-height: 20px !important;
}

/* ==========================================================================
   MOBILE BADGE OVERRIDE — ensures badge renders correctly on all devices
   ========================================================================== */

@media (max-width: 767px) {
	.bd-sale-badge {
		background:    #FFD700 !important;
		color:         #333 !important;
		font-weight:   400 !important;
		padding:       2px 6px !important;
		border-radius: 3px !important;
		font-size:     10px !important;
		position:      absolute !important;
		top:           6px !important;
		left:          6px !important;
		z-index:       2 !important;
		display:       inline-block !important;
	}
}