/* ==========================================================================
   FUGA — Slider sản phẩm + thẻ sản phẩm
   ========================================================================== */
.fg-pslider { position: relative; padding-block: calc(25.5 * var(--u)) calc(107.5 * var(--u)); background: #fff; }
.fg-pslider__controls { display: flex; justify-content: flex-end; gap: calc(25.5 * var(--u)); margin-bottom: calc(36 * var(--u)); }
.fg-pslider__arrow { line-height: 0; color: #000; opacity: .6; transition: opacity .2s; }
.fg-pslider__arrow:hover { opacity: 1; }
.fg-pslider__arrow[disabled] { opacity: .3; cursor: default; }
.fg-pslider__arrow .fg-icon { width: 24px; height: 14px; }
.fg-pslider__arrow--prev .fg-icon { transform: scaleX(-1); }
.fg-pslider__track {
	display: flex; gap: calc(9.75 * var(--u));
	margin-inline: calc(-1 * var(--fg-gutter)); padding-inline: var(--fg-gutter);
	overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.fg-pslider__track::-webkit-scrollbar { display: none; }
.fg-pslider .fg-scrollbar { position: absolute; left: var(--fg-gutter); right: var(--fg-gutter); bottom: calc(32.4 * var(--u)); }
.fg-pslider .fg-scrollbar__bar { width: 100%; height: calc(2.625 * var(--u)); }

.fg-pcard { position: relative; flex: none; width: calc(319.7 * var(--u)); aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #fafbfd; }
.fg-pcard__media { display: block; width: 100%; height: 100%; }
.fg-pcard__img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-top: calc(-18 * var(--u)); mix-blend-mode: multiply; }
.fg-pcard__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: calc(4.5 * var(--u)); padding: 15px; background: #fafbfd; letter-spacing: normal; }
.fg-pcard__name { font-size: 14px; line-height: 20px; font-weight: 700; text-transform: uppercase; }
.fg-pcard__variant { font-size: 14px; line-height: 20px; }
.fg-pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 6px; }
.fg-pcard__swatches { display: flex; align-items: center; gap: 6px; }
.fg-pcard__swatch { width: 24px; height: 24px; flex: none; background: #d9d9d9; border: 1px solid transparent; overflow: hidden; }
.fg-pcard__swatch.is-active { border-color: #000; }
.fg-pcard__swatch img { width: 100%; height: 100%; object-fit: cover; }
.fg-pcard__more { display: flex; align-items: center; font-size: 14px; line-height: 20px; }
.fg-pcard__price { margin-left: auto; font-size: 14px; line-height: 20px; white-space: nowrap; }

@media (max-width: 768px) {
	.fg-pslider { padding-block: 27px; }
	.fg-pslider__controls { display: none; }
	.fg-pslider__track { gap: 8px; margin-inline: -17px; padding-inline: 17px; }
	.fg-pcard { width: 154px; aspect-ratio: auto; overflow: visible; border-radius: 4px; background: transparent; }
	.fg-pcard__media { height: auto; margin-bottom: 16px; background: #fafbfd; }
	.fg-pcard__img { margin-top: 0; }
	.fg-pcard__info { position: static; gap: 1.2px; padding: 8px 0 26px; background: #fff; }
	.fg-pcard__name, .fg-pcard__variant { font-size: 12px; line-height: 17px; }
	.fg-pcard__meta { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
	.fg-pcard__swatches { gap: 4px; }
	.fg-pcard__swatch { width: 18px; height: 18px; }
	.fg-pcard__more { font-size: 12px; line-height: 12px; }
	.fg-pcard__price { margin-left: 0; font-size: 12px; line-height: 17px; }
	.fg-pslider .fg-scrollbar { position: static; display: flex; margin-top: 25px; height: 14px; }
	.fg-pslider .fg-scrollbar__bar { width: 220px; height: 2px; }
	.fg-pslider .fg-scrollbar__bar i { background: #9d9d9d; }
	.fg-pslider .fg-scrollbar__hint { display: block; }
}