/*
 * Sheetal Metals - "Products Grid" section
 * Markup: inc/sheetal-products.php  (WPBakery element "Products Grid")
 *
 * Colours and the column count come from --sm-pr-* custom properties written
 * inline by the shortcode, so the Design Options drive everything here.
 *
 *   1. Shell + decoration
 *   2. Section header
 *   3. Grid
 *   4. Card
 *   5. Card footer
 *   6. Responsive
 */
/* ======================================================== 1. Shell + width */

/*
 * Break out of the page container so the background runs edge to edge, then
 * cap the cards at the "Container width" setting and centre them. Margins do
 * the breakout rather than `left`, which would leave the box half a container
 * off when the row itself is not already full width.
 */
.sm-prod--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sm-prod--full .sm-prod-grid {
	max-width: var(--sm-pr-max, 1600px);
	margin-left: auto;
	margin-right: auto;
}

/* keeps both blocks off the screen edge on narrower displays */
.sm-prod--full .sm-prod-head,
.sm-prod--full .sm-prod-grid {
	box-sizing: border-box;
	padding-left: 30px;
	padding-right: 30px;
}

/* ====================================================== 2. Section header */
.sm-prod-head {
	position: relative;
	z-index: 1;
	/* wide enough to keep the heading on one line now that the cards are
	   1600 across; the subheading is narrowed on its own below */
	max-width: 1120px;
	margin: 0 auto 46px;
	text-align: center;
}

.sm-prod-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 12px;
	color: var(--sm-pr-text);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 3.4px;
	text-transform: uppercase;
}

.sm-prod-eyebrow i {
	display: block;
	width: 62px;
	height: 2px;
	background: var(--sm-pr-accent);
}

.sm-prod .sm-prod-title {
	margin: 0 0 12px;
	padding: 0;
	font-family: 'Exo', sans-serif;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--sm-pr-ink);
	text-align: center;
	text-transform: none;
}

.sm-prod .sm-prod-title span {
	color: var(--sm-pr-accent);
}

.sm-prod .sm-prod-sub {
	max-width: 780px;
	margin: 0 auto;
	color: var(--sm-pr-text);
	font-size: 17px;
	line-height: 1.6;
	text-align: center;
}

/* ================================================================ 3. Grid */
.sm-prod-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--sm-pr-cols), minmax(0, 1fr));
	gap: 26px;
}

/* ================================================================ 4. Card */
.sm-prod-card {
	position: relative;
	/* room for the accent bar that peeks out below */
	padding-bottom: 14px;
}

/* the coloured bar behind the bottom edge */
.sm-prod-card.has-bar::before {
	content: "";
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: 0;
	height: 34px;
	border-radius: 0 0 12px 12px;
	background: var(--sm-pr-accent);
	transition: left 0.3s ease, right 0.3s ease;
}

.sm-prod-card.has-bar:hover::before {
	left: 7%;
	right: 7%;
}

.sm-prod-link {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid rgba(22, 36, 60, 0.08);
	border-radius: 14px;
	overflow: hidden;
	background: var(--sm-pr-card);
	box-shadow: 0 10px 30px rgba(22, 36, 60, 0.07);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sm-prod-card:hover .sm-prod-link {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(22, 36, 60, 0.14);
}

.sm-prod-media {
	display: block;
	padding: 26px 26px 18px;
	background: linear-gradient(180deg, #fdfdfe 0%, #f3f6fa 100%);
}

/* Product photos are all shapes and sizes; a fixed box with contain keeps the
   row of cards even without cropping the part itself. */
.sm-prod-media .sm-prod-img {
	display: block;
	width: 100%;
	height: 250px;
	margin: 0 auto;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.sm-prod-card:hover .sm-prod-img {
	transform: scale(1.05);
}

/* ========================================================= 5. Card footer */
.sm-prod-foot {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
	padding: 18px 20px;
	background: var(--sm-pr-card);
}

.sm-prod-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sm-pr-accent);
	color: #fff;
	font-size: 18px;
	line-height: 1;
}

.sm-prod-name {
	flex: 1 1 auto;
	padding-left: 16px;
	border-left: 1px solid rgba(22, 36, 60, 0.14);
	color: var(--sm-pr-ink);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
	transition: color 0.25s ease;
}
.vc_custom_1789016176826{
    background-color: transparent !important;
};

.sm-prod-card:hover .sm-prod-name {
	color: var(--sm-pr-accent);
}

.sm-prod-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--sm-pr-accent);
	transition: transform 0.25s ease;
}

.sm-prod-arrow svg {
	width: 22px;
	height: 22px;
}

.sm-prod-card:hover .sm-prod-arrow {
	transform: translateX(4px);
}

/* ========================================================== 6. Responsive */
@media (max-width: 1400px) {
	.sm-prod .sm-prod-title { font-size: 38px; }
	.sm-prod-media .sm-prod-img { height: 215px; }
	.sm-prod-name { font-size: 15.5px; }
}

@media (max-width: 1199px) {
	.sm-prod-grid { gap: 20px; }
	.sm-prod .sm-prod-title { font-size: 33px; }
	.sm-prod-eyebrow { font-size: 13px; letter-spacing: 2.8px; }
	.sm-prod-eyebrow i { width: 42px; }
	.sm-prod-media { padding: 20px 20px 14px; }
	.sm-prod-media .sm-prod-img { height: 180px; }
	.sm-prod-foot { gap: 12px; padding: 15px 16px; }
	.sm-prod-ico { width: 38px; height: 38px; font-size: 16px; }
	.sm-prod-name { padding-left: 12px; font-size: 14.5px; }
}

@media (max-width: 991px) {
	/* two-up, whatever the column setting says */
	.sm-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm-prod .sm-prod-title { font-size: 28px; }
	.sm-prod .sm-prod-sub { font-size: 15.5px; }
	.sm-prod-head { margin-bottom: 34px; }
	.sm-prod--shapes::after { display: none; }
}

@media (max-width: 575px) {
	.sm-prod-grid { grid-template-columns: minmax(0, 1fr); }
	.sm-prod .sm-prod-title { font-size: 24px; }
	.sm-prod-eyebrow { font-size: 12px; letter-spacing: 2.2px; }
	.sm-prod-eyebrow i { width: 28px; }
	.sm-prod-media .sm-prod-img { height: 210px; }
	.sm-prod--shapes::before { display: none; }
}