/* ==========================================================================
   Certified Bling — footer (Phase 2)
   Brand-line CTA, then 6 columns (Shop / Collections / Custom / Customer
   Care / Company / Partners) + newsletter, legal row. Same restrained
   dark-canvas language as the rest of the system.
   ========================================================================== */

.cb-footer { background: var(--cb-black); color: var(--cb-white); padding-block: var(--cb-space-xl) var(--cb-space-l); }

/* .cb-brand-line (sections.css) already supplies the vertical rhythm here —
   this just adds the separating hairline below it and centers the CTA. */
.cb-footer__cta { border-bottom: 1px solid var(--cb-line-soft); margin-bottom: var(--cb-space-xl); padding-top: 0; }
.cb-footer__cta .cb-h-section { margin-bottom: var(--cb-space-m); }

.cb-footer__columns {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--cb-space-l);
	margin-bottom: var(--cb-space-xl);
}
/* Give the newsletter column a little more room than the five link columns
   it sits beside — it holds an input, not just a link list. */
.cb-footer__columns--6 .cb-footer__newsletter { grid-column: span 2; }
@media (max-width: 1240px) {
	.cb-footer__columns { grid-template-columns: repeat(4, 1fr); }
	.cb-footer__columns--6 .cb-footer__newsletter { grid-column: span 4; }
}
.cb-footer__col-title { /* .cb-label from base.css */ margin-bottom: var(--cb-space-s); display: block; }
.cb-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cb-footer__links a { color: var(--cb-mute); font-size: var(--cb-text-sm); }
.cb-footer__links a:hover { color: var(--cb-white); text-decoration: none; }

/* Newsletter column — email field styled like every other form field in the
   system (dark surface, hairline border, gold focus). */
.cb-footer__newsletter { display: flex; flex-direction: column; gap: var(--cb-space-s); }
.cb-footer__newsletter-form { display: flex; border-bottom: 1px solid var(--cb-line-soft); }
.cb-footer__newsletter-form input[type="email"] {
	flex: 1; background: transparent; border: 0; color: var(--cb-white);
	font-family: var(--cb-font-body); font-size: var(--cb-text-base);
	padding-block: 0.6rem;
}
.cb-footer__newsletter-form input[type="email"]::placeholder { color: var(--cb-mute); }
.cb-footer__newsletter-form input[type="email"]:focus { outline: none; border-color: var(--cb-white); }
/* Blocksy styles bare <button>/submit elements with its own default button
   chrome (solid blue fill, radius, padding) at a specificity our plain
   `button{background:none;...}` reset in base.css doesn't beat — found live
   during the Phase 1 visual QA pass (rendered as a stock blue "Join" pill,
   exactly the generic-SaaS look this system exists to avoid). `!important`
   on just the chrome properties matches this project's established pattern
   for the same fight against WooCommerce defaults (see
   woocommerce-blocks.css). */
.cb-footer__newsletter-form button {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 0 0.6rem var(--cb-space-m) !important;
	/* Suisse Int'l per the Phase 1 typography lock — it's a button. */
	font-family: var(--cb-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--cb-text-xs) !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--cb-mute);
}
.cb-footer__newsletter-form button:hover { color: var(--cb-gold); }
.cb-footer__consent { font-size: var(--cb-text-2xs); color: var(--cb-mute); line-height: 1.5; }

.cb-footer__social { display: flex; gap: var(--cb-space-s); margin-bottom: var(--cb-space-l); }
.cb-footer__social a { color: var(--cb-white); }
.cb-footer__social a:hover { color: var(--cb-gold); }

.cb-footer__legal {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cb-space-s);
	padding-top: var(--cb-space-m); border-top: 1px solid var(--cb-line-soft);
	font-family: var(--cb-font-mono); font-size: var(--cb-text-2xs); color: var(--cb-mute);
}
.cb-footer__legal-links { display: flex; gap: var(--cb-space-m); flex-wrap: wrap; }
.cb-footer__legal a { color: var(--cb-mute); }
.cb-footer__legal a:hover { color: var(--cb-white); }
/* Phase 14: the official logo mark, quiet and small — this is the legal
   bar, not a second brand moment (the footer already has one, the
   brand-line CTA above the columns). Baseline-aligned with the "© year"
   text beside it rather than a standalone block. */
.cb-footer__legal-brand { display: flex; align-items: center; gap: 0.5em; }
.cb-footer__logo { height: 14px; width: auto; display: block; opacity: 0.85; }

/* Currency selector — placeholder slot only; no multi-currency system exists
   yet, so this renders a single, non-interactive label rather than a fake
   working control. Becomes a real <select> when that system exists. */
.cb-footer__currency {
	font-family: var(--cb-font-mono); font-size: var(--cb-text-2xs);
	letter-spacing: 0.08em; color: var(--cb-mute);
}

@media (max-width: 1023px) {
	.cb-footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.cb-footer__columns { grid-template-columns: 1fr; gap: var(--cb-space-l); }
	.cb-footer__legal { flex-direction: column; }
}