/*
The Boss Love Theme — shortcode styles (compact premium layout).
Loaded ONLY on posts/pages that actually use a Boss Love shortcode.
*/

/* =========================================================
   1. HIGHLIGHT BOX — compact, icon left, no oversized padding
   ========================================================= */
.bl-hl{
	display:flex; gap:13px; align-items:flex-start;
	border-radius:10px; padding:14px 16px; margin:1.35em 0;
	border:1px solid; border-left-width:3px;
	font-size:0.94rem; line-height:1.62;
}
.bl-hl-icon{ flex:0 0 auto; display:flex; padding-top:1px; }
.bl-hl-icon svg{ width:20px; height:20px; display:block; }
.bl-hl-body{ flex:1; min-width:0; }
.bl-hl-heading{
	font-family:var(--bl-font-display); font-weight:700; font-size:0.97rem; line-height:1.4;
	color:var(--bl-dark); margin:0 0 3px;
}
.bl-hl-text{ display:block; }
.bl-hl-body p{ margin:0; font-size:0.9rem; line-height:1.6; }
.bl-hl-body p + p{ margin-top:6px; }
.bl-hl-yellow{ background:#FFF9E6; border-color:#F0DFA0; } .bl-hl-yellow .bl-hl-icon{ color:#B8860B; }
.bl-hl-blue{ background:#EDF5FD; border-color:#B4D2F0; }  .bl-hl-blue .bl-hl-icon{ color:#2B5F9E; }
.bl-hl-green{ background:#EDF7EC; border-color:#AFD6AA; } .bl-hl-green .bl-hl-icon{ color:#3C7A3E; }
.bl-hl-pink{ background:#FFEDF4; border-color:#F7B9CF; }  .bl-hl-pink .bl-hl-icon{ color:var(--bl-theme); }
.bl-hl-gray{ background:#F4F5F6; border-color:#DCDEE2; }  .bl-hl-gray .bl-hl-icon{ color:#5A5F68; }
.bl-hl-cta{
	clear:both; display:inline-flex; align-items:center; gap:6px; margin-top:9px;
	background:var(--bl-theme); color:#fff !important; border:0; border-radius:20px;
	padding:7px 15px; font-size:0.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
	transition:var(--bl-transition);
}
.bl-hl-cta:hover{ background:var(--bl-dark); transform:translateY(-1px); }

/* =========================================================
   2. CTA BUTTON — inline, tidy
   ========================================================= */
.bl-cta-wrap{ text-align:center; margin:1.5em 0; }
.bl-cta-wrap .bl-btn{ color:#fff !important; }

/* =========================================================
   3. PRODUCT CARD — true horizontal rectangle, no dead space
   image | title + details | price + CTA
   ========================================================= */
.bl-product-card{
	display:grid; grid-template-columns:118px minmax(0,1fr) 168px; gap:18px; align-items:center;
	background:var(--bl-surface); border:1px solid #E8E6EB; border-radius:12px;
	padding:14px 16px; margin:1.5em 0; position:relative; overflow:hidden;
	box-shadow:0 1px 3px rgba(30,30,30,.04); transition:var(--bl-transition);
}
.bl-product-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--bl-theme); }
.bl-product-card:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:0 0 0 1px color-mix(in srgb, var(--bl-theme) 40%, transparent), 0 14px 34px color-mix(in srgb, var(--bl-theme) 22%, transparent); }
.bl-pc-media{ width:118px; height:118px; border-radius:9px; overflow:hidden; background:var(--bl-soft-bg); }
.bl-pc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease-in-out; }
.bl-product-card:hover .bl-pc-media img{ transform:scale(1.06); }
.bl-pc-body{ min-width:0; }
.bl-pc-labels{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 6px; }
.bl-pc-badge{
	font-size:0.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
	color:#fff !important; background:var(--bl-theme); padding:4px 10px; border-radius:20px; line-height:1;
}
.bl-pc-price-label{
	font-size:0.63rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
	color:#1C7A4A; background:#E8F6EE; border:1px solid #1C7A4A; border-radius:20px; padding:3px 10px; line-height:1.4;
}
.bl-pc-title{ font-family:var(--bl-font-display); font-size:1.04rem; font-weight:700; line-height:1.38; margin:0 0 4px; }
.bl-pc-title a{ color:var(--bl-dark); text-decoration:none; transition:var(--bl-transition); }
.bl-product-card:hover .bl-pc-title a{ color:var(--bl-theme); }
.bl-pc-details{ font-size:0.85rem; color:var(--bl-soft); line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bl-pc-action{ display:flex; flex-direction:column; align-items:stretch; gap:7px; text-align:center; }
.bl-pc-price{ font-family:var(--bl-font-display); font-size:1.18rem; font-weight:700; color:var(--bl-dark); line-height:1.2; }
.bl-pc-price s{ color:var(--bl-soft); font-size:0.8rem; font-weight:400; margin-left:6px; }
.bl-pc-btn{
	display:block; background:var(--bl-dark); color:#fff !important; border-radius:22px;
	padding:10px 14px; font-size:0.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
	text-align:center; white-space:nowrap; transition:var(--bl-transition);
}
.bl-pc-btn:hover{ background:var(--bl-theme); color:#fff !important; transform:translateY(-1px); box-shadow:0 8px 18px color-mix(in srgb, var(--bl-theme) 38%, transparent); }

/* =========================================================
   4. COMPARISON TABLE — horizontal bars inside ONE container
   [image+label] | [title + details] | [budget label + CTA]
   ========================================================= */
.bl-compare{ margin:1.9em 0; }
/* eyebrow with a rule on both sides */
.bl-compare-eyebrow{
	display:flex; align-items:center; justify-content:center; gap:12px;
	font-size:0.66rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
	color:var(--bl-theme-text,#D4145A); margin:0 0 6px;
}
.bl-compare-eyebrow::before, .bl-compare-eyebrow::after{
	content:""; height:1px; width:42px; background:color-mix(in srgb, var(--bl-theme) 45%, transparent);
}
.bl-compare-title{
	text-align:center; font-family:var(--bl-font-display); font-weight:700;
	font-size:clamp(1.3rem,1.5vw + 1rem,1.72rem); line-height:1.3; margin:0 0 4px;
}
.bl-compare-hook{ text-align:center; color:var(--bl-soft); font-size:0.88rem; line-height:1.55; margin:0 0 10px; }

.bl-compare-box{
	border:1px solid #E8E6EB; border-radius:14px; background:var(--bl-surface); overflow:hidden;
	box-shadow:0 1px 3px rgba(30,30,30,.05); margin-top:12px;
}
.bl-cmp-row{
	display:grid; grid-template-columns:96px minmax(0,1fr) 158px; gap:16px; align-items:center;
	padding:13px 16px; position:relative; transition:background .3s ease;
}
/* the thin hairline that separates bars */
.bl-cmp-row + .bl-cmp-row{ border-top:1px solid #EFEDF1; }
.bl-cmp-row{ transition:transform .3s ease-out, background .3s ease, box-shadow .3s ease-out; }
.bl-cmp-row:hover{
	background:#fff; transform:translateY(-3px); z-index:2;
	box-shadow:0 10px 26px color-mix(in srgb, var(--bl-theme) 16%, transparent);
}

.bl-cmp-thumb{ position:relative; width:96px; height:96px; border-radius:9px; overflow:hidden; background:var(--bl-soft-bg); }
.bl-cmp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease-in-out; }
.bl-cmp-row:hover .bl-cmp-thumb img{ transform:scale(1.07); }
/* corner label sits on the image corner */
.bl-cmp-label{
	display:inline-block; margin:0 0 6px;
	font-size:0.58rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
	color:#fff !important; padding:4px 11px; border-radius:20px; line-height:1.35; white-space:nowrap;
	background:var(--bl-dark);
}
.bl-cmp-info{ min-width:0; }
.bl-cmp-name{ font-family:var(--bl-font-display); font-size:1.02rem; font-weight:700; line-height:1.36; margin:0 0 4px; }
.bl-cmp-name a{ color:var(--bl-dark); text-decoration:none; transition:var(--bl-transition); }
.bl-cmp-row:hover .bl-cmp-name a{ color:var(--bl-theme); }
.bl-cmp-desc{ font-size:0.84rem; color:var(--bl-soft); line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bl-cmp-action{ display:flex; flex-direction:column; align-items:stretch; gap:7px; }
.bl-cmp-price{
	display:block; text-align:center; font-size:0.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	color:#1C7A4A; background:#E8F6EE; border:1px solid #1C7A4A; border-radius:20px; padding:4px 10px; line-height:1.45;
}
.bl-cmp-btn{
	display:block; text-align:center; background:var(--bl-dark); color:#fff !important; border-radius:22px;
	padding:10px 14px; font-size:0.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
	white-space:nowrap; transition:var(--bl-transition);
}
.bl-cmp-btn:hover{ background:var(--bl-theme); color:#fff !important; transform:translateY(-1px); box-shadow:0 8px 18px color-mix(in srgb, var(--bl-theme) 38%, transparent); }
.bl-compare-note{ text-align:center; font-size:0.7rem; color:var(--bl-soft); margin:11px 0 0; line-height:1.5; }
.bl-compare-note a{ color:var(--bl-theme); font-weight:600; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:640px){
	.bl-product-card{ grid-template-columns:86px minmax(0,1fr); gap:13px; padding:13px; }
	.bl-pc-media{ width:86px; height:86px; }
	.bl-pc-action{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; }
	.bl-pc-btn{ padding:9px 18px; }

	.bl-cmp-row{ grid-template-columns:78px minmax(0,1fr); gap:12px; padding:12px 13px; }
	.bl-cmp-thumb{ width:78px; height:78px; }
	.bl-cmp-action{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; }
	.bl-cmp-price{ flex:0 0 auto; padding:5px 12px; }
	.bl-cmp-btn{ padding:9px 18px; white-space:normal; }
	.bl-pc-btn{ white-space:normal; }

	.bl-hl{ padding:13px 14px; gap:11px; }
	.bl-hl-icon svg{ width:18px; height:18px; }
}