/* ==========================================================================
   FutureDokan Phone Hub — Frontend Stylesheet
   ==========================================================================
   DESIGN NOTE (for whoever maintains this later): this is an original
   design built for a Bangladesh phone-price/comparison utility — not a
   copy of 91mobiles.com's actual CSS. Only the general SHAPE of what
   sections exist (hero search, budget quick-links, brand row, spec
   tables, tabs) takes inspiration from that site's information
   architecture, which is documented in the project's planning notes.
   Every color, typeface, and spacing decision below was made fresh
   for this brief.

   Design tokens:
     Base:    #0E1626 (deep indigo-navy — evokes phone hardware/glass,
              distinct from pure black)
     Surface: #F7F8FA (off-white card background)
     Accent:  #0EA5A0 (saturated teal — screen/display-glow association)
     Success: #16803C (official/trust badge)
     Warning: #B45309 (unofficial/grey-market badge)
     Display face: Newsreader (serif, real weight range — gives phone
                    names editorial gravity instead of generic sans)
     Body face:     Inter (dense, legible at small sizes)
   ========================================================================== */

:root {
	--fd-base:        #0E1626;
	--fd-base-light:  #1B2740;
	--fd-surface:     #F7F8FA;
	--fd-surface-alt: #EEF1F5;
	--fd-border:      #DDE2E9;
	--fd-text:        #1A2233;
	--fd-text-muted:  #5B6577;
	--fd-accent:      #0EA5A0;
	--fd-accent-dark: #0B7A76;
	--fd-success:     #16803C;
	--fd-success-bg:  #E7F6EC;
	--fd-warning:     #B45309;
	--fd-warning-bg:  #FBF0E4;
	--fd-radius-sm:   6px;
	--fd-radius-md:   10px;
	--fd-radius-lg:   16px;
	--fd-shadow:      0 1px 3px rgba(14, 22, 38, 0.08), 0 1px 2px rgba(14, 22, 38, 0.06);
	--fd-shadow-lg:   0 8px 24px rgba(14, 22, 38, 0.12);
	--fd-font-display: "Newsreader", Georgia, serif;
	--fd-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fd-container-w:  1240px;
}

/* --------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------- */
.fd-home, .fd-catalog, .fd-product, .fd-taxonomy-page {
	font-family: var(--fd-font-body);
	color: var(--fd-text);
	line-height: 1.55;
}

.fd-home *, .fd-catalog *, .fd-product *, .fd-taxonomy-page * {
	box-sizing: border-box;
}

.fd-container {
	max-width: var(--fd-container-w);
	margin: 0 auto;
	padding: 0 20px;
}

/* Respect reduced-motion preference sitewide within our components. */
@media (prefers-reduced-motion: reduce) {
	.fd-home *, .fd-catalog *, .fd-product *, .fd-taxonomy-page * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------------
   Hero / search
   -------------------------------------------------------------------- */
.fd-hero {
	background: linear-gradient(180deg, var(--fd-base) 0%, var(--fd-base-light) 100%);
	padding: 56px 0 40px;
	color: #fff;
}

.fd-hero__title {
	font-family: var(--fd-font-display);
	font-weight: 500;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.2;
	max-width: 720px;
	margin: 0 0 28px;
	color: #fff;
}

.fd-search {
	display: flex;
	max-width: 640px;
	background: #fff;
	border-radius: var(--fd-radius-md);
	overflow: hidden;
	box-shadow: var(--fd-shadow-lg);
}

.fd-search__input {
	flex: 1;
	border: none;
	padding: 16px 20px;
	font-size: 15px;
	font-family: var(--fd-font-body);
	color: var(--fd-text);
	outline: none;
}

.fd-search__submit {
	background: var(--fd-accent);
	color: #fff;
	border: none;
	padding: 0 28px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.fd-search__submit:hover,
.fd-search__submit:focus-visible {
	background: var(--fd-accent-dark);
}

.fd-budget-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.fd-budget-links__item {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.fd-budget-links__item:hover,
.fd-budget-links__item:focus-visible {
	background: var(--fd-accent);
	border-color: var(--fd-accent);
}

/* --------------------------------------------------------------------
   Brand row
   -------------------------------------------------------------------- */
.fd-brands {
	background: var(--fd-surface);
	border-bottom: 1px solid var(--fd-border);
	padding: 18px 0;
}

.fd-brands__row {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.fd-brands__item {
	white-space: nowrap;
	color: var(--fd-text-muted);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.fd-brands__item:hover,
.fd-brands__item:focus-visible {
	color: var(--fd-accent-dark);
	border-color: var(--fd-accent);
}

/* --------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------- */
.fd-section {
	padding: 44px 0;
}

.fd-section--alt {
	background: var(--fd-surface);
}

.fd-section__title {
	font-family: var(--fd-font-display);
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 20px;
	max-width: var(--fd-container-w);
	padding: 0 20px;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------
   Product grid & card
   -------------------------------------------------------------------- */
.fd-grid {
	max-width: var(--fd-container-w);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.fd-grid--scroll {
	display: flex;
	overflow-x: auto;
	gap: 20px;
	scroll-snap-type: x proximity;
}

.fd-grid--scroll .fd-card {
	flex: 0 0 260px;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.fd-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.fd-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
	.fd-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

.fd-card {
	background: #fff;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-md);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	display: flex;
	flex-direction: column;
}

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

.fd-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--fd-surface-alt);
}

.fd-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 16px;
}

.fd-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--fd-surface-alt) 25%, var(--fd-border) 50%, var(--fd-surface-alt) 75%);
}

.fd-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 3px 9px;
	border-radius: 999px;
	text-transform: uppercase;
}

.fd-badge--new {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--fd-accent);
	color: #fff;
}

.fd-badge--official {
	background: var(--fd-success-bg);
	color: var(--fd-success);
}

.fd-badge--official::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fd-success);
	animation: fd-pulse 2s ease-in-out infinite;
}

.fd-badge--unofficial {
	background: var(--fd-warning-bg);
	color: var(--fd-warning);
}

@keyframes fd-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.fd-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.fd-card__brand {
	font-size: 11px;
	font-weight: 700;
	color: var(--fd-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fd-card__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.fd-card__title a {
	color: var(--fd-text);
	text-decoration: none;
}

.fd-card__title a:hover,
.fd-card__title a:focus-visible {
	color: var(--fd-accent-dark);
}

.fd-card__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

.fd-card__price {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 16px;
	color: var(--fd-text);
}

.fd-card__price--tba {
	font-size: 13px;
	font-weight: 500;
	color: var(--fd-text-muted);
}

.fd-card__specs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 6px 0 0;
}

.fd-card__specs li {
	font-size: 11px;
	color: var(--fd-text-muted);
	background: var(--fd-surface-alt);
	padding: 3px 8px;
	border-radius: var(--fd-radius-sm);
}

.fd-card__actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.fd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--fd-font-body);
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--fd-border);
	background: #fff;
	color: var(--fd-text);
	border-radius: var(--fd-radius-sm);
	padding: 7px 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.fd-btn:hover,
.fd-btn:focus-visible {
	border-color: var(--fd-accent);
}

.fd-btn--icon {
	padding: 7px;
}

.fd-btn--icon[aria-pressed="true"] {
	background: var(--fd-accent);
	border-color: var(--fd-accent);
	color: #fff;
}

.fd-btn--compare {
	flex: 1;
}

.fd-btn--compare input {
	margin-right: 4px;
}

.fd-btn--primary {
	background: var(--fd-accent);
	border-color: var(--fd-accent);
	color: #fff;
	padding: 12px 24px;
	font-size: 14px;
}

.fd-btn--primary:hover,
.fd-btn--primary:focus-visible {
	background: var(--fd-accent-dark);
}

.fd-btn--secondary {
	padding: 12px 24px;
	font-size: 14px;
}

/* --------------------------------------------------------------------
   Category grid
   -------------------------------------------------------------------- */
.fd-cat-grid {
	max-width: var(--fd-container-w);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media (max-width: 768px) {
	.fd-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

.fd-cat-card {
	background: #fff;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-md);
	padding: 20px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: border-color 0.15s ease;
}

.fd-cat-card:hover,
.fd-cat-card:focus-visible {
	border-color: var(--fd-accent);
}

.fd-cat-card__name {
	font-weight: 700;
	color: var(--fd-text);
	font-size: 15px;
}

.fd-cat-card__count {
	font-size: 12px;
	color: var(--fd-text-muted);
}

/* --------------------------------------------------------------------
   News grid
   -------------------------------------------------------------------- */
.fd-news-grid {
	max-width: var(--fd-container-w);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 768px) {
	.fd-news-grid { grid-template-columns: 1fr; }
}

.fd-news-card {
	text-decoration: none;
	color: var(--fd-text);
	display: block;
}

.fd-news-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--fd-radius-md);
	margin-bottom: 10px;
}

.fd-news-card__title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 4px;
	line-height: 1.35;
}

.fd-news-card__date {
	font-size: 12px;
	color: var(--fd-text-muted);
}

/* --------------------------------------------------------------------
   Catalog / filter page
   -------------------------------------------------------------------- */
.fd-catalog__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	border-bottom: 1px solid var(--fd-border);
	margin-bottom: 24px;
}

.fd-catalog__count {
	font-weight: 700;
	font-size: 15px;
}

.fd-catalog__sort select {
	font-family: var(--fd-font-body);
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-sm);
	background: #fff;
}

.fd-catalog__layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 28px;
	align-items: start;
}

@media (max-width: 900px) {
	.fd-catalog__layout {
		grid-template-columns: 1fr;
	}
}

.fd-filters {
	position: sticky;
	top: 20px;
}

.fd-filters__group {
	margin-bottom: 24px;
}

.fd-filters__group h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fd-text-muted);
	margin: 0 0 10px;
}

.fd-filters__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fd-filters__list a {
	display: flex;
	justify-content: space-between;
	color: var(--fd-text);
	text-decoration: none;
	font-size: 14px;
	padding: 6px 8px;
	border-radius: var(--fd-radius-sm);
	transition: background 0.15s ease;
}

.fd-filters__list a span {
	color: var(--fd-text-muted);
	font-size: 12px;
}

.fd-filters__list a:hover,
.fd-filters__list a:focus-visible {
	background: var(--fd-surface);
}

.fd-filters__list a.is-active {
	background: var(--fd-accent);
	color: #fff;
}

.fd-filters__list a.is-active span {
	color: rgba(255, 255, 255, 0.8);
}

.fd-catalog .fd-grid {
	padding: 0;
	max-width: none;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
	.fd-catalog .fd-grid { grid-template-columns: repeat(2, 1fr); }
}

.fd-catalog__empty {
	text-align: center;
	color: var(--fd-text-muted);
	padding: 60px 20px;
	font-size: 15px;
}

/* --------------------------------------------------------------------
   AJAX filter loading state — applied by catalog-ajax.js to
   .fd-catalog__grid-wrap while a fragment fetch is in flight. Kept
   subtle (opacity + disabled pointer events) rather than a full
   spinner overlay, since the swap is typically fast on a same-
   origin fragment fetch and a heavier loading UI would flash
   distractingly for requests that resolve in well under a second.
   -------------------------------------------------------------------- */
.fd-catalog__grid-wrap.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.fd-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}

.fd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-sm);
	text-decoration: none;
	color: var(--fd-text);
	font-size: 14px;
}

.fd-pagination .page-numbers.current {
	background: var(--fd-accent);
	border-color: var(--fd-accent);
	color: #fff;
}

/* --------------------------------------------------------------------
   Taxonomy page header
   -------------------------------------------------------------------- */
.fd-breadcrumb {
	font-size: 13px;
	color: var(--fd-text-muted);
	padding: 20px 0 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.fd-breadcrumb a {
	color: var(--fd-text-muted);
	text-decoration: none;
}

.fd-breadcrumb a:hover {
	color: var(--fd-accent-dark);
}

.fd-taxonomy-page__title {
	font-family: var(--fd-font-display);
	font-size: 28px;
	font-weight: 500;
	margin: 12px 0 16px;
}

.fd-taxonomy-page__description {
	color: var(--fd-text-muted);
	max-width: 780px;
	margin-bottom: 28px;
}

/* --------------------------------------------------------------------
   Single product page
   -------------------------------------------------------------------- */
.fd-product__hero {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 40px;
	padding: 28px 0 40px;
}

@media (max-width: 860px) {
	.fd-product__hero { grid-template-columns: 1fr; }
}

.fd-product__gallery {
	background: var(--fd-surface);
	border-radius: var(--fd-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.fd-product__main-image {
	max-width: 100%;
	max-height: 420px;
	object-fit: contain;
}

.fd-product__main-image--placeholder {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, var(--fd-surface-alt) 25%, var(--fd-border) 50%, var(--fd-surface-alt) 75%);
	border-radius: var(--fd-radius-md);
}

.fd-product__brand {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fd-text-muted);
}

.fd-product__title {
	font-family: var(--fd-font-display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 500;
	margin: 6px 0 14px;
	line-height: 1.2;
}

.fd-product__badges {
	margin-bottom: 18px;
}

.fd-product__price-block {
	padding: 18px 0;
	border-top: 1px solid var(--fd-border);
	border-bottom: 1px solid var(--fd-border);
	margin-bottom: 20px;
}

.fd-product__price {
	font-variant-numeric: tabular-nums;
	font-size: 32px;
	font-weight: 700;
	display: block;
}

.fd-product__price--tba {
	font-size: 20px;
	color: var(--fd-text-muted);
}

.fd-product__price-label {
	font-size: 12px;
	color: var(--fd-text-muted);
}

.fd-product__price-alt {
	margin-top: 8px;
	font-size: 15px;
	color: var(--fd-text-muted);
}

.fd-product__price-alt span {
	font-size: 12px;
}

.fd-product__actions {
	display: flex;
	gap: 12px;
}

/* --------------------------------------------------------------------
   Affiliate stores table
   -------------------------------------------------------------------- */
.fd-product__stores {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--fd-border);
}

.fd-product__stores-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fd-text-muted);
	margin: 0 0 12px;
}

.fd-stores-table {
	width: 100%;
	border-collapse: collapse;
}

.fd-stores-table tr {
	border-bottom: 1px solid var(--fd-border);
}

.fd-stores-table tr:last-child {
	border-bottom: none;
}

.fd-stores-table tr.is-best-price {
	background: var(--fd-success-bg);
}

.fd-stores-table td {
	padding: 12px 10px;
	font-size: 14px;
	vertical-align: middle;
}

.fd-stores-table__name {
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.fd-badge--best-price {
	background: var(--fd-success);
	color: #fff;
}

.fd-stores-table__price {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.fd-stores-table__action {
	text-align: right;
}

.fd-btn--store {
	background: var(--fd-base);
	color: #fff;
	border-color: var(--fd-base);
	text-decoration: none;
	padding: 8px 16px;
	display: inline-flex;
}

.fd-btn--store:hover,
.fd-btn--store:focus-visible {
	background: var(--fd-base-light);
	border-color: var(--fd-base-light);
}

/* --------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------- */
.fd-tabs__nav {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--fd-border);
	margin-bottom: 24px;
}

.fd-tabs__btn {
	font-family: var(--fd-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--fd-text-muted);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 12px 18px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.fd-tabs__btn:hover,
.fd-tabs__btn:focus-visible {
	color: var(--fd-text);
}

.fd-tabs__btn.is-active {
	color: var(--fd-accent-dark);
	border-color: var(--fd-accent);
}

.fd-tabs__panel {
	padding-bottom: 60px;
}

/* --------------------------------------------------------------------
   Specs table — signature layout element: a colored dot per group
   in place of a numbered marker, since spec groups have no real
   sequence (see design rationale in project notes).
   -------------------------------------------------------------------- */
.fd-specs-group {
	margin-bottom: 32px;
}

.fd-specs-group__title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
	padding-left: 16px;
	position: relative;
}

.fd-specs-group__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fd-accent);
}

.fd-specs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.fd-specs-table tr {
	border-bottom: 1px solid var(--fd-border);
}

.fd-specs-table tr:last-child {
	border-bottom: none;
}

.fd-specs-table th {
	text-align: left;
	font-weight: 500;
	color: var(--fd-text-muted);
	padding: 10px 16px 10px 24px;
	width: 40%;
}

.fd-specs-table td {
	padding: 10px 8px;
	font-weight: 500;
}

/* --------------------------------------------------------------------
   Tab button review-count badge
   -------------------------------------------------------------------- */
.fd-tabs__btn-count {
	color: var(--fd-text-muted);
	font-weight: 500;
	font-size: 12px;
}

/* --------------------------------------------------------------------
   Reviews tab
   -------------------------------------------------------------------- */
.fd-review-summary {
	display: flex;
	gap: 32px;
	align-items: center;
	padding: 20px 0 28px;
	border-bottom: 1px solid var(--fd-border);
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.fd-review-summary__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 100px;
}

.fd-review-summary__number {
	font-variant-numeric: tabular-nums;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--fd-text);
}

.fd-review-summary__out-of {
	font-size: 16px;
	color: var(--fd-text-muted);
}

.fd-review-summary__count {
	font-size: 12px;
	color: var(--fd-text-muted);
	margin-top: 4px;
	text-align: center;
}

.fd-review-summary__breakdown {
	flex: 1;
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fd-review-bar {
	display: grid;
	grid-template-columns: 28px 1fr 32px;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

.fd-review-bar__label {
	color: var(--fd-text-muted);
	text-align: right;
}

.fd-review-bar__track {
	background: var(--fd-surface-alt);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.fd-review-bar__fill {
	display: block;
	height: 100%;
	background: var(--fd-accent);
	border-radius: 999px;
}

.fd-review-bar__count {
	color: var(--fd-text-muted);
}

.fd-review-list {
	margin-bottom: 32px;
}

.fd-review-list__empty {
	color: var(--fd-text-muted);
	padding: 20px 0;
}

.fd-review-item {
	padding: 20px 0;
	border-bottom: 1px solid var(--fd-border);
}

.fd-review-item:first-child {
	padding-top: 0;
}

.fd-review-item__header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.fd-review-item__stars {
	color: var(--fd-warning);
	letter-spacing: 1px;
	font-size: 14px;
}

.fd-review-item__author {
	font-weight: 700;
	font-size: 14px;
}

.fd-review-item__date {
	font-size: 12px;
	color: var(--fd-text-muted);
}

.fd-review-item__title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px;
}

.fd-review-item__body {
	font-size: 14px;
	color: var(--fd-text);
	line-height: 1.6;
	margin: 0 0 10px;
}

.fd-review-item__helpful {
	background: none;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-sm);
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fd-text-muted);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.fd-review-item__helpful:hover:not(:disabled),
.fd-review-item__helpful:focus-visible:not(:disabled) {
	border-color: var(--fd-accent);
	color: var(--fd-accent-dark);
}

.fd-review-item__helpful:disabled {
	opacity: 0.6;
	cursor: default;
}

.fd-review-form-wrap {
	background: var(--fd-surface);
	border-radius: var(--fd-radius-md);
	padding: 24px;
}

.fd-review-form-wrap h3 {
	font-size: 17px;
	margin: 0 0 16px;
}

.fd-review-form p {
	margin-bottom: 14px;
}

.fd-review-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--fd-text-muted);
}

.fd-review-form input[type="text"],
.fd-review-form input[type="email"],
.fd-review-form textarea {
	font-family: var(--fd-font-body);
	font-size: 14px;
	padding: 9px 12px;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-sm);
	background: #fff;
}

.fd-review-form__rating {
	margin-bottom: 16px;
}

.fd-review-form__rating > span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--fd-text-muted);
	margin-bottom: 6px;
}

/* Star rating input: radio buttons visually hidden, styled via
   their sibling <span> — a standard accessible star-rating pattern
   (radios remain in the DOM and keyboard/screen-reader operable,
   only their default appearance is hidden). */
.fd-star-input {
	display: inline-flex;
	gap: 4px;
}

.fd-star-input label {
	display: inline-block;
	margin: 0;
	cursor: pointer;
}

.fd-star-input input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.fd-star-input span {
	font-size: 24px;
	color: var(--fd-border);
	transition: color 0.1s ease;
}

.fd-star-input input[type="radio"]:checked ~ span {
	color: var(--fd-warning);
}

.fd-star-input label:hover span {
	color: var(--fd-warning);
}

.fd-review-form__status {
	margin: 12px 0 0;
	font-size: 13px;
	min-height: 18px;
}

.fd-review-form__status.is-success {
	color: var(--fd-success);
}

.fd-review-form__status.is-error {
	color: var(--fd-warning);
}

/* --------------------------------------------------------------------
   FAQ tab — uses native <details>/<summary>, so most interaction
   (open/close, keyboard operability) comes from the browser for
   free; these rules are purely visual.
   -------------------------------------------------------------------- */
.fd-faq-item {
	border-bottom: 1px solid var(--fd-border);
	padding: 16px 0;
}

.fd-faq-item:first-child {
	padding-top: 0;
}

.fd-faq-item__question {
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 24px;
}

.fd-faq-item__question::-webkit-details-marker {
	display: none;
}

.fd-faq-item__question::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 18px;
	color: var(--fd-accent);
	transition: transform 0.15s ease;
}

.fd-faq-item[open] .fd-faq-item__question::after {
	transform: rotate(45deg);
}

.fd-faq-item__answer {
	margin-top: 10px;
	color: var(--fd-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.fd-faq-item__answer p:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------
   Price History tab
   -------------------------------------------------------------------- */
.fd-price-history__summary {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--fd-radius-sm);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 20px;
}

.fd-price-history__summary--down {
	background: var(--fd-success-bg);
	color: var(--fd-success);
}

.fd-price-history__summary--up {
	background: var(--fd-warning-bg);
	color: var(--fd-warning);
}

.fd-price-chart {
	width: 100%;
	height: auto;
	max-height: 240px;
	background: var(--fd-surface);
	border-radius: var(--fd-radius-md);
	padding: 12px;
}

.fd-price-chart__axis-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--fd-text-muted);
	margin: 6px 4px 24px;
}

.fd-price-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.fd-price-history-table th {
	text-align: left;
	padding: 8px 12px;
	background: var(--fd-surface);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fd-text-muted);
}

.fd-price-history-table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--fd-border);
}

.fd-price-history-table tr:last-child td {
	border-bottom: none;
}

/* --------------------------------------------------------------------
   Q&A tab
   -------------------------------------------------------------------- */
.fd-qa-list {
	margin-bottom: 32px;
}

.fd-qa-list__empty {
	color: var(--fd-text-muted);
	padding: 20px 0;
}

.fd-qa-item {
	padding: 20px 0;
	border-bottom: 1px solid var(--fd-border);
}

.fd-qa-item:first-child {
	padding-top: 0;
}

.fd-qa-item__question,
.fd-qa-item__answer {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.fd-qa-item__answers {
	margin-top: 14px;
	padding-left: 16px;
	border-left: 2px solid var(--fd-border);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fd-qa-item__q-mark,
.fd-qa-item__a-mark {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
}

.fd-qa-item__q-mark {
	background: var(--fd-base);
}

.fd-qa-item__a-mark {
	background: var(--fd-accent);
}

.fd-qa-item__body {
	font-size: 14px;
	color: var(--fd-text);
	line-height: 1.6;
	margin: 0 0 6px;
}

.fd-qa-item__meta {
	font-size: 12px;
	color: var(--fd-text-muted);
}

.fd-js-qa-upvote {
	background: none;
	border: none;
	padding: 0;
	color: var(--fd-text-muted);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

.fd-js-qa-upvote:hover:not(:disabled),
.fd-js-qa-upvote:focus-visible:not(:disabled) {
	color: var(--fd-accent-dark);
}

.fd-js-qa-upvote:disabled {
	opacity: 0.6;
	cursor: default;
	text-decoration: none;
}

.fd-qa-item__answer-toggle {
	background: none;
	border: none;
	padding: 10px 0 0;
	color: var(--fd-accent-dark);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.fd-qa-item__answer-toggle:hover,
.fd-qa-item__answer-toggle:focus-visible {
	text-decoration: underline;
}

.fd-qa-answer-form {
	margin-top: 12px;
	padding: 14px;
	background: var(--fd-surface);
	border-radius: var(--fd-radius-sm);
}

.fd-qa-answer-form p {
	margin-bottom: 10px;
}

.fd-qa-answer-form input,
.fd-qa-answer-form textarea {
	font-family: var(--fd-font-body);
	font-size: 14px;
	padding: 8px 10px;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-sm);
}

.fd-qa-new-question {
	background: var(--fd-surface);
	border-radius: var(--fd-radius-md);
	padding: 24px;
}

.fd-qa-new-question h3 {
	font-size: 17px;
	margin: 0 0 16px;
}

.fd-qa-new-question p {
	margin-bottom: 14px;
}

.fd-qa-new-question label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--fd-text-muted);
}

.fd-qa-new-question input,
.fd-qa-new-question textarea {
	font-family: var(--fd-font-body);
	font-size: 14px;
	padding: 9px 12px;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-sm);
}

.fd-qa-form__status {
	margin: 12px 0 0;
	font-size: 13px;
	min-height: 18px;
}

.fd-qa-form__status.is-success {
	color: var(--fd-success);
}

.fd-qa-form__status.is-error {
	color: var(--fd-warning);
}

/* --------------------------------------------------------------------
   Recent Stories (single product page) — reuses .fd-news-grid /
   .fd-news-card from the homepage, only the section title needs an
   inline (non-container-padded) variant since this section sits
   inside .fd-product's own .fd-container rather than a full-width
   homepage section.
   -------------------------------------------------------------------- */
.fd-product__related-stories {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--fd-border);
}

.fd-section__title--inline {
	padding: 0;
	max-width: none;
	margin-bottom: 20px;
}

/* --------------------------------------------------------------------
   Compare tray — created dynamically by futuredokan.js when at
   least one "Compare" checkbox is checked; see initCompare().
   -------------------------------------------------------------------- */
.fd-compare-tray {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	background: var(--fd-base);
	color: #fff;
	padding: 10px 12px 10px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--fd-shadow-lg);
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 14px;
}

.fd-compare-tray__btn {
	background: var(--fd-accent);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 8px 18px;
	font-family: var(--fd-font-body);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.fd-compare-tray__btn:hover:not(:disabled),
.fd-compare-tray__btn:focus-visible:not(:disabled) {
	background: var(--fd-accent-dark);
}

.fd-compare-tray__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------
   Wishlist button pressed state — set via aria-pressed by
   futuredokan.js after confirming the actual server-side state
   (see handleWishlistToggle / syncWishlistState). The heart fills
   solid when the product is in the visitor's wishlist.
   -------------------------------------------------------------------- */
.fd-js-wishlist[aria-pressed="true"] {
	background: var(--fd-accent);
	border-color: var(--fd-accent);
	color: #fff;
}

.fd-js-wishlist[aria-pressed="true"] svg {
	fill: currentColor;
}

/* --------------------------------------------------------------------
   Compare page — rendered client-side by public/js/compare.js into
   [data-fd-compare-root]. Layout uses CSS Grid with a
   dynamically-set grid-template-columns (set inline by the JS,
   since column count depends on how many products are being
   compared) — the styles here define what each cell/row looks
   like, not the column count itself.
   -------------------------------------------------------------------- */
.fd-compare-loading,
.fd-compare-error,
.fd-compare-noscript {
	text-align: center;
	color: var(--fd-text-muted);
	padding: 60px 20px;
	font-size: 15px;
}

.fd-compare-error {
	color: var(--fd-warning);
}

.fd-compare-header-row {
	display: grid;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 2px solid var(--fd-border);
	margin-bottom: 8px;
}

.fd-compare-header-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}

.fd-compare-header-cell img {
	max-width: 140px;
	max-height: 140px;
	object-fit: contain;
	margin-bottom: 8px;
}

.fd-compare-header-cell__title {
	font-weight: 700;
	font-size: 15px;
	color: var(--fd-text);
	text-decoration: none;
	line-height: 1.3;
}

.fd-compare-header-cell__title:hover,
.fd-compare-header-cell__title:focus-visible {
	color: var(--fd-accent-dark);
}

.fd-compare-header-cell__brand {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fd-text-muted);
}

.fd-compare-header-cell__price {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 17px;
	color: var(--fd-accent-dark);
}

.fd-compare-group {
	margin-bottom: 28px;
}

.fd-compare-group__title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 10px;
	padding-left: 16px;
	position: relative;
}

.fd-compare-group__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fd-accent);
}

.fd-compare-table {
	display: grid;
	gap: 1px;
	background: var(--fd-border);
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-sm);
	overflow: hidden;
}

.fd-compare-table__label,
.fd-compare-table__value {
	background: #fff;
	padding: 10px 14px;
	font-size: 14px;
}

.fd-compare-table__label {
	font-weight: 600;
	color: var(--fd-text-muted);
	background: var(--fd-surface);
}

.fd-compare-table__value {
	color: var(--fd-text);
	text-align: center;
}

@media (max-width: 768px) {
	.fd-compare-header-row,
	.fd-compare-table {
		overflow-x: auto;
	}
}

/* --------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Visible keyboard focus everywhere in our components — never
   suppressed, per the accessibility quality floor. */
.fd-home a:focus-visible,
.fd-home button:focus-visible,
.fd-catalog a:focus-visible,
.fd-catalog button:focus-visible,
.fd-catalog input:focus-visible,
.fd-product a:focus-visible,
.fd-product button:focus-visible,
.fd-taxonomy-page a:focus-visible {
	outline: 2px solid var(--fd-accent);
	outline-offset: 2px;
}