/* ==========================================================================
   TB Store – Navy Classic
   Components (tb-*) work everywhere; the global restyle is scoped to
   body.tb-navy, which is added only after the layout is applied.
   ========================================================================== */

:root {
	--tb-navy: #0c2340;
	--tb-navy-deep: #081a30;
	--tb-red: #bf0d3e;
	--tb-grey: #f4f5f7;
	--tb-line: #e3e6eb;
	--tb-muted: #6b7280;
	--tb-ink: #1f2937;
	--tb-head: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
	--tb-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Shared components ---------- */

.tb-eyebrow {
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tb-red);
	margin: 0 0 6px;
}
.tb-eyebrow--light { color: #fff; opacity: .85; }

.tb-sec-title {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	border-bottom: 2px solid var(--tb-navy);
	padding-bottom: 12px;
}
.tb-sec-title--center { flex-direction: column; align-items: center; text-align: center; }
.tb-sec-title__h {
	font-family: var(--tb-head);
	font-weight: 800;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--tb-navy);
	margin: 0;
}
.tb-sec-title__link {
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tb-navy);
	white-space: nowrap;
}
.tb-sec-title__link:hover { color: var(--tb-red); }

/* Collections row */
.tb-collections {
	display: grid;
	grid-template-columns: repeat(var(--tb-cols, 4), minmax(0, 1fr));
	gap: 16px;
}
.tb-collection { display: block; text-align: center; color: var(--tb-navy); }
.tb-collection__img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--tb-grey);
	overflow: hidden;
}
.tb-collection__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.tb-collection:hover .tb-collection__img img { transform: scale(1.05); }
.tb-collection__initial {
	font-family: var(--tb-head);
	font-weight: 800;
	font-size: 64px;
	color: var(--tb-navy);
	opacity: .25;
}
.tb-collection__name {
	display: block;
	margin-top: 10px;
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.tb-collection:hover .tb-collection__name { color: var(--tb-red); }

/* Promo tile (mega menu + shop the look) */
.tb-promo {
	position: relative;
	display: block;
	min-height: 240px;
	height: 100%;
	background: var(--tb-navy);
	overflow: hidden;
	color: #fff;
}
.tb-promo--tall { min-height: 520px; }
.tb-promo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.tb-promo:hover .tb-promo__img { transform: scale(1.04); }
.tb-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 26, 48, 0) 35%, rgba(8, 26, 48, .85) 100%);
}
.tb-promo__body {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 1;
}
.tb-promo__title {
	display: block;
	font-family: var(--tb-head);
	font-weight: 800;
	font-size: 28px;
	line-height: 1.05;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.tb-promo--tall .tb-promo__title { font-size: 40px; }
.tb-promo__cta {
	display: inline-block;
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 2px solid #fff;
	padding-bottom: 2px;
}
.tb-promo:hover .tb-promo__cta { border-color: var(--tb-red); }

/* Perks band */
.tb-perks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	color: #fff;
}
.tb-perk { display: flex; gap: 14px; align-items: flex-start; }
.tb-perk__icon { flex: 0 0 34px; width: 34px; height: 34px; color: #fff; }
.tb-perk__title {
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: 0 0 2px;
	color: #fff;
}
.tb-perk__text { font-size: 14px; margin: 0; opacity: .8; color: #fff; }

/* Newsletter */
.tb-news { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.tb-news__title {
	font-family: var(--tb-head);
	font-weight: 800;
	font-size: clamp(26px, 3vw, 36px);
	text-transform: uppercase;
	color: var(--tb-navy);
	margin: 0 0 4px;
}
.tb-news__sub { margin: 0; color: var(--tb-muted); }
.tb-news__form { display: flex; flex: 1 1 380px; max-width: 520px; margin: 0; }
.tb-news .tb-news__input {
	flex: 1;
	height: 50px;
	margin: 0;
	border: 2px solid var(--tb-navy);
	border-right: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 16px;
	font-size: 15px;
	background: #fff;
}
.tb-news .tb-news__btn {
	height: 50px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 0;
	background: var(--tb-navy);
	color: #fff;
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}
.tb-news .tb-news__btn:hover { background: var(--tb-red); }
.tb-news__msg { flex-basis: 100%; margin: 0; font-weight: 600; }
.tb-news__msg--ok { color: #15803d; }
.tb-news__msg--bad { color: var(--tb-red); }

.tb-news--footer { display: block; margin-top: 18px; }
.tb-news--footer .tb-news__sub { color: rgba(255, 255, 255, .75); margin-bottom: 10px; }
.tb-news--footer .tb-news__form { max-width: 100%; }
.tb-news--footer .tb-news__input { border-color: #fff; height: 44px; }
.tb-news--footer .tb-news__btn { background: var(--tb-red); height: 44px; padding: 0 18px; }
.tb-news--footer .tb-news__btn:hover { background: #fff; color: var(--tb-navy); }
.tb-news--footer .tb-news__msg--ok { color: #86efac; }

/* Mega menu */
.tb-mega { padding: 26px 10px !important; }
.tb-mega .col { padding-bottom: 0; }
.tb-mega__h {
	font-family: var(--tb-head);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tb-navy);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--tb-line);
}
.tb-mega__list { list-style: none; margin: 0; padding: 0; }
.tb-mega__list li { margin: 0 0 2px; padding: 0; list-style: none; }
.tb-mega__list a {
	display: block;
	padding: 5px 0;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tb-ink);
}
.tb-mega__list a:hover { color: var(--tb-red); padding-left: 4px; transition: padding .15s; }
.tb-mega .tb-promo { min-height: 260px; }

/* Hero */
.tb-hero .tb-hero__title {
	font-family: var(--tb-head);
	font-weight: 800;
	font-size: clamp(40px, 6vw, 76px);
	line-height: .95;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
}
.tb-hero .tb-hero__text { font-size: 18px; color: rgba(255, 255, 255, .9); margin-bottom: 22px; max-width: 520px; }
.tb-hero .button.tb-btn,
.tb-btn.button {
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .12em;
	padding: 6px 30px;
	border-radius: 0;
}
.tb-hero .button.white { background: #fff; color: var(--tb-navy); border-color: #fff; }
.tb-hero .button.white:hover { background: var(--tb-red); color: #fff; border-color: var(--tb-red); box-shadow: none; }

/* Footer block */
.tb-footer .tb-footer__brand {
	font-family: var(--tb-head);
	font-weight: 800;
	font-size: 30px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 8px;
}
.tb-footer .tb-footer__about { color: rgba(255, 255, 255, .75); max-width: 360px; }
.tb-footer .tb-footer__h {
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
}
.tb-footer .tb-footer__list { list-style: none; margin: 0; padding: 0; }
.tb-footer .tb-footer__list li { list-style: none; margin: 0 0 8px; padding: 0; color: rgba(255, 255, 255, .75); font-size: 15px; }
.tb-footer .tb-footer__list a { color: rgba(255, 255, 255, .75); }
.tb-footer .tb-footer__list a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Global restyle (only when applied)
   ========================================================================== */

body.tb-navy { font-family: var(--tb-body); color: var(--tb-ink); }
body.tb-navy h1, body.tb-navy h2, body.tb-navy h3, body.tb-navy h4,
body.tb-navy .heading-font, body.tb-navy .product-title.entry-title {
	font-family: var(--tb-head);
	letter-spacing: .01em;
}
body.tb-navy h1.product-title { text-transform: uppercase; font-weight: 800; font-size: 34px; line-height: 1.05; color: var(--tb-navy); }

/* Announcement bar */
body.tb-navy #top-bar { font-size: 13px; }
body.tb-navy #top-bar .tb-announce,
body.tb-navy .tb-announce {
	margin: 0;
	font-family: var(--tb-head);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
}
body.tb-navy .tb-announce b { color: #fff; border-bottom: 1px solid var(--tb-red); }

/* Header */
body.tb-navy .header-main { border-bottom: 1px solid var(--tb-line); }
body.tb-navy .header-nav-main > li > a {
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .06em;
	color: var(--tb-navy);
}
body.tb-navy .header-nav-main > li > a:hover,
body.tb-navy .header-nav-main > li.active > a { color: var(--tb-red); }
body.tb-navy .nav-line-bottom > li > a::before { background-color: var(--tb-red); height: 3px; }
body.tb-navy .header-nav-main .header-search-link,
body.tb-navy .header-nav-main .account-item > a,
body.tb-navy .header-nav-main .cart-item > a { color: var(--tb-navy); }

/* Dropdowns / mega menu */
body.tb-navy .nav-dropdown {
	border-top: 3px solid var(--tb-navy);
	border-radius: 0;
	box-shadow: 0 18px 40px rgba(12, 35, 64, .15);
}
body.tb-navy .menu-item-has-block .nav-dropdown { padding: 0; }
body.tb-navy .nav-dropdown > li > a { font-size: 15px; color: var(--tb-ink); }
body.tb-navy .nav-dropdown > li > a:hover { color: var(--tb-red); }

/* Mobile menu */
body.tb-navy .mobile-sidebar .nav-sidebar > li > a {
	font-family: var(--tb-head);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Buttons */
body.tb-navy .button { border-radius: 0; font-family: var(--tb-head); font-weight: 700; letter-spacing: .1em; }
body.tb-navy .button.primary:not(.is-outline) { background-color: var(--tb-navy); }
body.tb-navy .button.primary:not(.is-outline):hover { background-color: var(--tb-red); }
body.tb-navy .single_add_to_cart_button,
body.tb-navy .checkout-button,
body.tb-navy #place_order {
	background-color: var(--tb-navy) !important;
	font-size: 17px;
	min-height: 50px;
}
body.tb-navy .single_add_to_cart_button:hover,
body.tb-navy .checkout-button:hover,
body.tb-navy #place_order:hover { background-color: var(--tb-red) !important; }
body.tb-navy .buy_now_button { background: var(--tb-red); color: #fff; min-height: 50px; font-size: 17px; }

/* Product cards */
body.tb-navy .product-small.box { background: #fff; }
body.tb-navy .product-small .box-image { background: var(--tb-grey); }
body.tb-navy .product-small .box-text-products { padding: 12px 2px 16px; text-align: left; }
body.tb-navy .product-small .product-cat,
body.tb-navy .product-small p.category {
	font-family: var(--tb-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tb-muted);
	opacity: 1;
	margin-bottom: 4px;
}
body.tb-navy .product-small .name.product-title {
	font-size: 15px;
	line-height: 1.35;
	margin-bottom: 6px;
}
body.tb-navy .product-small .name.product-title a {
	color: var(--tb-navy);
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.tb-navy .product-small .name.product-title a:hover { color: var(--tb-red); }
body.tb-navy .product-small .price { font-size: 16px; font-weight: 700; color: var(--tb-navy); }
body.tb-navy .product-small .price del { color: var(--tb-muted); font-weight: 400; }
body.tb-navy .product-small .price ins { color: var(--tb-red); text-decoration: none; }
body.tb-navy .product-small .add-to-cart-button { margin-top: 10px; }
body.tb-navy .product-small .add-to-cart-button .button {
	display: block;
	width: 100%;
	margin: 0;
	border: 2px solid var(--tb-navy);
	color: var(--tb-navy);
	background: transparent;
	font-size: 14px;
	min-height: 40px;
	line-height: 36px;
}
body.tb-navy .product-small .add-to-cart-button .button:hover { background: var(--tb-navy); color: #fff; }
body.tb-navy .product-small .quick-view {
	background: rgba(12, 35, 64, .92);
	color: #fff;
	font-family: var(--tb-head);
	font-weight: 700;
	letter-spacing: .1em;
}
body.tb-navy .badge-container .badge-inner,
body.tb-navy .badge .badge-inner {
	background-color: var(--tb-red);
	border-radius: 0;
	font-family: var(--tb-head);
	font-weight: 700;
	letter-spacing: .04em;
}

/* Sections on the home page */
body.tb-navy .tb-sec .row > .col { padding-bottom: 0; }
body.tb-navy .tb-look .tb-promo { min-height: 520px; }
body.tb-navy .tb-blog .post-title { font-family: var(--tb-head); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--tb-navy); }
body.tb-navy .tb-blog .box-image { background: var(--tb-grey); }

/* Category / shop pages */
body.tb-navy .shop-page-title .page-title,
body.tb-navy .category-page-title .page-title { text-transform: uppercase; font-weight: 800; color: var(--tb-navy); }
body.tb-navy .woocommerce-breadcrumb, body.tb-navy .breadcrumbs { font-family: var(--tb-head); letter-spacing: .08em; text-transform: uppercase; }

/* Footer */
body.tb-navy .footer-wrapper { background: var(--tb-navy); }
body.tb-navy .absolute-footer { background: var(--tb-navy-deep) !important; color: rgba(255, 255, 255, .7); font-size: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 849px) {
	.tb-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tb-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tb-promo--tall, body.tb-navy .tb-look .tb-promo { min-height: 380px; }
}

@media (max-width: 549px) {
	.tb-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.tb-collection__name { font-size: 15px; }
	.tb-sec-title { align-items: flex-start; flex-direction: column; gap: 6px; }
	.tb-perks { grid-template-columns: 1fr; gap: 16px; }
	.tb-news { gap: 16px; }
	.tb-news__form { flex-basis: 100%; }
	.tb-news .tb-news__btn { padding: 0 16px; }
	.tb-promo__title { font-size: 24px; }
	.tb-promo--tall .tb-promo__title { font-size: 30px; }
	.tb-hero .tb-hero__text { font-size: 16px; }
	body.tb-navy #top-bar .tb-announce,
	body.tb-navy .tb-announce { font-size: 12px; letter-spacing: .05em; }
	body.tb-navy .product-small .name.product-title { font-size: 14px; }
	body.tb-navy .product-small .add-to-cart-button .button { font-size: 12px; }
}

/* Footer brand: white TeeBulletin logo instead of the text name */
body.tb-navy .tb-footer .tb-footer__brand {
	width: 230px;
	height: 35px;
	font-size: 0;
	color: transparent;
	background: url("brand/teebulletin-logo-white.svg") left center / contain no-repeat;
	margin-bottom: 14px;
}
body.tb-navy .header-logo,
body.tb-navy .header_logo { width: auto; max-height: 40px; }
@media (max-width: 849px) {
	body.tb-navy .header-logo, body.tb-navy .header_logo { max-height: 30px; }
}
@media (max-width: 849px) {
	.tb-news--footer { margin-bottom: 28px; }
}

/* Hero artwork: keep text readable when the illustration sits behind it */
.tb-hero .banner .overlay { background: none !important; }
@media (max-width: 849px) {
	.tb-hero .banner .bg { background-position: 82% center !important; }
	.tb-hero .banner .banner-bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(12, 35, 64, .92) 0%, rgba(12, 35, 64, .7) 60%, rgba(12, 35, 64, .35) 100%);
	}
}

/* Journal intro card (home blog section while there are no posts) */
.tb-journal {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: center;
	background: var(--tb-grey);
	width: 100%;
}
.tb-journal__img img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0 !important; }
.tb-journal__body { padding: 36px 44px; }
.tb-journal__title {
	font-family: var(--tb-head);
	font-weight: 800;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--tb-navy);
	margin: 0 0 12px;
}
.tb-journal__text { color: var(--tb-muted); font-size: 16px; margin-bottom: 22px; }
.tb-journal .button { margin: 0; }
@media (max-width: 849px) {
	.tb-journal { grid-template-columns: 1fr; }
	.tb-journal__body { padding: 24px 20px 28px; }
}

/* ---------- Collections v2: full-bleed image cards with overlay label ---------- */
.tb-collections { gap: 14px; }
.tb-collection {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--tb-navy);
	color: #fff;
	isolation: isolate;
}
.tb-collection .tb-collection__img {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: #e9ebef;
}
.tb-collection .tb-collection__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12);
	border-radius: 0 !important;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.tb-collection:hover .tb-collection__img img { transform: scale(1.2); }
.tb-collection::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(12, 35, 64, 0) 45%, rgba(12, 35, 64, .55) 70%, rgba(8, 26, 48, .92) 100%);
	transition: opacity .3s;
}
.tb-collection .tb-collection__name {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 2;
	margin: 0;
	text-align: left;
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	color: #fff;
	transition: transform .3s;
}
.tb-collection .tb-collection__name::after {
	content: "Shop Now \2192";
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #fff;
	opacity: .85;
	border-top: 2px solid var(--tb-red);
	padding-top: 8px;
	width: max-content;
}
.tb-collection:hover .tb-collection__name { color: #fff; transform: translateY(-4px); }
.tb-collection:hover .tb-collection__name::after { opacity: 1; }
.tb-collection:focus-visible { outline: 3px solid var(--tb-red); outline-offset: 2px; }
@media (max-width: 549px) {
	.tb-collections { gap: 10px; }
	.tb-collection .tb-collection__name { left: 14px; right: 14px; bottom: 12px; font-size: 20px; }
	.tb-collection .tb-collection__name::after { font-size: 12px; margin-top: 6px; padding-top: 6px; }
}