/*
 * Mat-Hub theme engine — structure, spacing and states.
 *
 * The theme header WordPress actually reads is in style.css at the theme
 * root, not here. This file is the engine: it is kept deliberately colour-
 * neutral so the brand layer in brand.css can re-skin the whole site without
 * touching structural rules. The one exception is the token block below,
 * which is where every colour in the theme is defined.
 */

/* -------------------------------------------------------------------- Tokens */

/*
 * Palette: navy + teal on a cool stone background.
 *
 * Replaces the earlier terracotta + green pairing (v1.1.1 and before).
 * Every value below is checked against WCAG AA (4.5:1) against --c-bg and
 * against white text on the colour itself, the same way the original
 * palette was. --c-gold-bright is the one exception worth noting: its only
 * real text usage is the footer link hover (light text on the dark
 * --c-secondary-dark footer), so it's checked against that background
 * instead of --c-bg — a pale, muted teal rather than a proper gold, since
 * gold read as a third accent hue against the brief for a two-tone brand.
 * Do not lighten or re-hue any of these without re-running the contrast
 * check in docs/DESIGN.md.
 *
 * --c-accent is kept as an alias of --c-primary because the whole of
 * theme.css, plugin.css and site.css was written against it. Renaming it
 * would mean touching every rule for no gain.
 *
 * --c-sale now doubles as the promo-badge colour in the brand's own teal
 * rather than a stock red, by request. Because that token was also driving
 * form validation (required-field markers, error text, invalid borders),
 * those now read from a separate --c-error token instead — a teal "this
 * field is wrong" reads as decoration, not a warning, and undercuts the
 * thing an error state exists to do.
 */
:root {
	--c-bg: #f6f8f7;
	--c-surface: #ffffff;
	--c-surface-warm: #eef2f1;
	--c-ink: #17222b;
	--c-muted: #5f6870;
	--c-line: #dde3e2;

	--c-primary: #24395c;
	--c-primary-dark: #172740;
	--c-primary-tint: #e4e9f0;

	--c-secondary: #1f6f76;
	--c-secondary-dark: #154d52;
	--c-secondary-tint: #e1f0ef;

	--c-gold: #4c6e73;
	--c-gold-bright: #8fd0d6;

	--c-accent: var(--c-primary);
	--c-accent-ink: #ffffff;
	--c-sale: #1f6f76;
	--c-error: #b0453a;

	/* site.css and plugin.css already read this with a beige fallback. */
	--dh-accent-soft: var(--c-primary-tint);

	--font-ui: "Inter", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-bn: "Hind Siliguri", "Noto Sans Bengali", sans-serif;

	--space: 1rem;
	--radius: 10px;
	--radius-lg: 18px;
	--container: 1240px;
	--shadow: 0 1px 2px rgba( 23, 34, 43, .06 ), 0 4px 16px rgba( 23, 34, 43, .05 );
	--shadow-lift: 0 2px 6px rgba( 23, 34, 43, .08 ), 0 12px 28px rgba( 23, 34, 43, .10 );
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

html[lang^="bn"] body { font-family: var(--font-bn); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.container {
	width: min( 100% - 2rem, var(--container) );
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip-path: inset( 50% );
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: .5rem; left: .5rem;
	z-index: 999; width: auto; height: auto;
	clip-path: none; padding: .6rem 1rem;
	background: var(--c-accent); color: var(--c-accent-ink);
	border-radius: var(--radius);
}

/* -------------------------------------------------------------------- Header */

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
}

.site-header__bar {
	display: flex; align-items: center; gap: .75rem;
	padding: .6rem 0;
	flex-wrap: wrap;
}

.site-brand {
	font-weight: 700; font-size: 1.15rem;
	color: var(--c-ink); text-decoration: none;
	white-space: nowrap;
}

.site-search { flex: 1 1 140px; max-width: 640px; order: 3; width: 100%; }

.site-search input[type="search"] {
	width: 100%; padding: .65rem .9rem;
	border: 1px solid var(--c-line); border-radius: 999px;
	background: var(--c-bg); font-size: .95rem;
	min-height: 44px;
}

.site-header__actions { display: flex; align-items: center; gap: 1.1rem; margin-inline-start: auto; }

.site-header__actions a {
	color: var(--c-ink); text-decoration: none; font-size: .9rem;
	display: inline-flex; align-items: center; min-height: 44px;
}

/*
 * The phone number is only shown in the header on wider screens. On a phone
 * it competes with the search bar for a single cramped row and wraps onto
 * two lines; the floating call button (.dh-call-fab) already covers calling
 * on small screens, so hiding it here removes the duplicate instead of
 * squeezing it in.
 *
 * Specificity note: ".site-header__actions a" above is one class + one
 * element (0,0,1,1), which beats a bare ".site-header__phone" (0,0,1,0)
 * regardless of source order — the display:none would silently lose. Scoping
 * it under the parent class matches that specificity and wins.
 */
.site-header__actions .site-header__phone { display: none; }

.site-header__actions .site-header__whatsapp {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	border-radius: 50%;
	color: #128c7e;
	transition: color .18s ease, background .18s ease, transform .18s ease;
}

.site-header__actions .site-header__whatsapp:hover,
.site-header__actions .site-header__whatsapp:focus-visible {
	color: #075e54;
	background: #e7f6f2;
}

.site-header__actions .site-header__whatsapp:active { transform: scale( .96 ); }

.site-header__whatsapp-icon {
	display: block;
	width: 28px;
	height: 28px;
	fill: currentColor;
}

@media ( min-width: 782px ) {
	.site-header__bar { flex-wrap: nowrap; }
	.site-search { order: 0; width: auto; }
	.site-header__actions .site-header__phone { display: inline-flex; }
}

.cart-count {
	display: inline-grid; place-items: center; min-width: 1.55em; height: 1.55em; padding: 0 .3em;
	background: var(--c-accent); color: var(--c-accent-ink);
	border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1; text-align: center;
}

.site-header__actions .header-cart { gap: .28rem; }
.header-cart__icon {
	width: 25px; height: 25px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.75;
	stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- Navigation */

.primary-nav ul { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0 0 .3rem; }
.primary-nav a {
	color: var(--c-ink); text-decoration: none; font-size: .86rem; font-weight: 600;
	display: inline-flex; align-items: center; gap: .42rem; min-height: 44px;
	width: max-content; padding: .35rem .82rem .35rem .48rem;
	border: 1px solid transparent; border-radius: 999px;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--c-ink); filter: brightness( .97 ); }

.primary-nav .nav-pill img {
	width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain;
}

.primary-nav .nav-pill--shop a { background: #e8edf2; border-color: #ccd7e1; }
.primary-nav .nav-pill--designs a { background: #f5ece5; border-color: #e6d2c2; }
.primary-nav .nav-pill--quote a { background: #e9eff6; border-color: #cad7e5; }
.primary-nav .nav-pill--sourcing a { background: #eeeaf5; border-color: #d8cfe7; }
.primary-nav .nav-pill--custom a { background: #e6f1ee; border-color: #c9ddd7; }

/* ------------------------------------------------------------------ Products */

.dh-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 165px, 1fr ) );
	gap: 1rem;
	list-style: none; margin: 0; padding: 0;
}

.dh-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}

.dh-card:hover { box-shadow: var(--shadow); transform: translateY( -2px ); }

.dh-card__media { position: relative; aspect-ratio: 1; background: var(--c-bg); }
.dh-card__media img { width: 100%; height: 100%; object-fit: cover; }

.dh-card__body { padding: .7rem .75rem .85rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }

.dh-card__vendor { font-size: .72rem; color: var(--c-muted); text-decoration: none; }

.dh-card__title {
	font-size: .9rem; font-weight: 500; margin: 0; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.dh-card__title a { color: var(--c-ink); text-decoration: none; }

.dh-card__price { margin-top: auto; font-weight: 600; font-size: .98rem; }
.dh-card__price del { color: var(--c-muted); font-weight: 400; font-size: .85em; margin-inline-end: .3rem; }
.dh-card__price ins { text-decoration: none; color: var(--c-sale); }

.dh-card__flag {
	position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem;
	background: var(--c-sale); color: #fff;
	font-size: .7rem; padding: .2rem .45rem; border-radius: 4px;
}

/* ------------------------------------------------------------------- Filters */

.dh-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.25rem; }

.dh-chip {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .35rem .8rem;
	min-height: 40px;
	border: 1px solid var(--c-line); border-radius: 999px;
	background: var(--c-surface); color: var(--c-muted);
	font-size: .82rem; text-decoration: none;
}

.dh-chip[aria-pressed="true"], .dh-chip.is-active {
	background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink);
}

/* -------------------------------------------------------------------- Footer */

.site-footer {
	margin-top: 3rem; padding: 2.5rem 0 1.5rem;
	background: var(--c-surface); border-top: 1px solid var(--c-line);
	font-size: .9rem;
}

.site-footer__cols {
	display: grid; grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) ); gap: 1.75rem;
}

.site-footer h3 { font-size: .95rem; margin: 0 0 .6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 0; }
.site-footer a {
	color: var(--c-muted); text-decoration: none;
	display: inline-flex; align-items: center; min-height: 42px;
}
.site-footer a:hover { color: var(--c-accent); }

.site-footer__legal {
	margin-top: 2rem; padding-top: 1rem;
	border-top: 1px solid var(--c-line);
	color: var(--c-muted); font-size: .82rem;
}

/* ------------------------------------------------------- Mobile call button */

/*
 * A fixed floating button necessarily sits over whatever content is beneath
 * it at any given scroll position — that is true on every device, not just
 * small ones. Two things keep it from becoming a nuisance: keep the tappable
 * area small (a circle, not a full-width pill) so it hides as little content
 * as possible, and respect the safe area on notched phones so it never sits
 * under the home-indicator gesture bar.
 */
.dh-call-fab {
	position: fixed;
	inset-block-end: max( 1rem, env( safe-area-inset-bottom, 0px ) + .75rem );
	inset-inline-end: max( 1rem, env( safe-area-inset-right, 0px ) + 1rem );
	z-index: 60;
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--c-accent); color: var(--c-accent-ink);
	text-decoration: none; font-size: 1.3rem; font-weight: 600;
	box-shadow: var(--shadow);
}

@media ( min-width: 782px ) { .dh-call-fab { display: none; } }

@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}