/* ==========================================================================
   FILE: assets/css/polo-section.css
   PURPOSE: Styles the homepage "Polo T-Shirts" section (keyword-search
   based, no real category behind it) — template-parts/sections/polo-
   section.php. Heading follows the same premium pattern used on the
   Shop page heading and the Trending section: eyebrow + bold title +
   gradient divider line + subtitle. The product grid itself needs no
   extra CSS — it reuses the exact same `ul.products` / `.dc-shop-card`
   rules from assets/css/shop-card.css.
   Loaded on the homepage only — see functions.php section 31.
   ========================================================================== */

.dc-polo {
	/* FIX: no horizontal padding here — ul.products (shop-card.css)
	   already adds its own 0 16px padding. Adding it again here was
	   doubling the side inset to 32px, squeezing the grid narrower and
	   making every card look smaller than on the Shop page / Trending
	   section. Vertical spacing only, horizontal spacing stays with the
	   grid itself so cards come out the exact same size as everywhere
	   else. */
	padding: 28px 0 36px;
}

.dc-polo__head {
	text-align: center;
	margin-bottom: 18px;
	padding: 0 16px;
}
.dc-polo__brand {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #000;
	font-weight: 700;
	margin-bottom: 8px;
}
.dc-polo__title {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #000;
	margin: 0;
	line-height: 1.1;
}
.dc-polo__line {
	display: block;
	width: 60px;
	height: 1px;
	margin: 14px auto 0;
	background: linear-gradient( 90deg, transparent, #000, transparent );
}
.dc-polo__sub {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: #777;
}

/* grid itself inherits ul.products / .dc-shop-card from shop-card.css.
   FIX: the card's info block is an <a> tag, so the browser's default
   link underline was showing on the name/price — same issue the
   Trending section had, same override needed here. */
.dc-polo__grid .dc-shop-card__info,
.dc-polo__grid .dc-shop-card__name,
.dc-polo__grid .dc-shop-card__price,
.dc-polo__grid .dc-shop-card__link {
	text-decoration: none !important;
}

.dc-polo__viewall {
	display: block;
	max-width: 200px;
	margin: 18px auto 0;
	padding: 11px;
	border: 1px solid #000;
	border-radius: 6px;
	color: #000;
	background: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background .25s ease, color .25s ease;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.dc-polo__viewall:hover {
	background: #000;
	color: #fff;
}