/* =========================================
   PRICENOW — HOME.CSS
   Homepage: Hero, Cards, Sections, Carousel
   ========================================= */

/* ── PRODUCT CARD ────────────────────────────────────── */
.pn-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
  position: relative;
}
.pn-card:hover {
  border-color: var(--color-border-soft);
  background: var(--color-bg-card-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--color-border-soft);
}
.pn-card__image-wrap {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: var(--color-bg-soft);
}
.pn-card__image { width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow); }
.pn-card:hover .pn-card__image { transform: scale(1.05); }
.pn-card__image--placeholder {
  display:flex;align-items:center;justify-content:center;
  background:var(--color-bg-soft);width:100%;height:100%;
}
.pn-card__badges { position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px; }
.pn-card__platform-count {
  position:absolute;bottom:10px;right:10px;
  background:rgba(30,48,104,0.82);backdrop-filter:blur(6px);
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  font-size:0.7rem;font-weight:700;color:var(--color-accent);padding:3px 9px;letter-spacing:0.04em;
}
.pn-card__body { padding:var(--space-md);display:flex;flex-direction:column;gap:6px;flex:1; }
.pn-card__brand {
  font-size:0.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--color-primary);transition:opacity var(--transition-fast);
}
.pn-card__brand:hover { opacity:0.75; }
.pn-card__title { font-family:var(--font-display);font-size:0.92rem;font-weight:700;line-height:1.35;color:var(--pn-foreground); }
.pn-card__title a { color:inherit;transition:color var(--transition-fast); }
.pn-card__title a:hover { color:var(--color-primary); }
.pn-card__intro { font-size:0.78rem;color:var(--color-text-muted);line-height:1.5;flex:1; }
.pn-card__footer {
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:var(--space-sm);border-top:1px solid var(--color-border);
}
.pn-card__platform { display:flex;align-items:center; }
.pn-card__platform-logo { height:20px;width:auto;max-width:80px;object-fit:contain;filter:brightness(0) invert(1);opacity:0.5; }
.pn-card__platform-name { font-size:0.72rem;color:var(--color-text-faint);font-weight:600; }
.pn-card__price-wrap { text-align:right; }
.pn-card__from { font-size:0.68rem;color:var(--color-text-faint);display:block; }
.pn-card__price { font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--color-primary); }
.pn-card__no-price { font-size:0.78rem;color:var(--color-text-faint); }
.pn-card__cta { margin-top:var(--space-sm);width:100%;justify-content:center; }

/* ── HERO ────────────────────────────────────────────── */
/* ══════════════════════════════════════════════
   HERO — static image banner
══════════════════════════════════════════════ */
.pn-hero-banner { padding: 20px 0 8px; }

/* Single banner */
.pn-banner { position: relative; border-radius: 16px; overflow: hidden; line-height: 0; }
.pn-banner__link { display: block; line-height: 0; }
.pn-banner__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  max-height: 480px;
}

/* Slider */
.pn-banner--slider { overflow: hidden; }
.pn-banner__slide { display: none; }
.pn-banner__slide.is-active { display: block; animation: banner-fade 0.4s ease; }

@keyframes banner-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Prev / next arrows */
.pn-banner__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.18s;
  z-index: 5;
}
.pn-banner__nav:hover { background: rgba(0,0,0,0.6); }
.pn-banner__nav--prev { left: 14px; }
.pn-banner__nav--next { right: 14px; }

/* Dots */
.pn-banner__dots {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 5;
}
.pn-banner__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: transparent;
  cursor: pointer; padding: 0;
  transition: background 0.18s, border-color 0.18s;
}
.pn-banner__dot.is-active {
  background: #fff;
  border-color: #fff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pn-hero-banner { padding: 12px 0 4px; }
  .pn-banner, .pn-banner__img { border-radius: 10px; }
  .pn-banner__img { max-height: 220px; }
  .pn-banner__nav { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
  .pn-hero-banner { padding: 8px 0 0; }
  .pn-banner, .pn-banner__img { border-radius: 8px; }
  .pn-banner__img { max-height: 160px; }
  .pn-banner__nav { display: none; }
}

/* ── Right column — decorative visuals ── */
.pn-hero__right {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 280px;
  height: 240px;
}

.pn-hero__visual { position: relative; width: 100%; height: 100%; }

.pn-hero__visual-ring {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.pn-hero__visual-ring::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.pn-hero__visual-card {
  position: absolute;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: hero-float 4s ease-in-out infinite;
}
.pn-hero__visual-card--1 { top: 10px; left: 0; animation-delay: 0s; }
.pn-hero__visual-card--2 { bottom: 10px; right: 0; animation-delay: 1.5s; }

.pn-hero__visual-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pn-hero__visual-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
}
.pn-hero__visual-save {
  font-size: 0.72rem;
  font-weight: 700;
  color: #4ade80;
}

.pn-hero__visual-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f5a623;
  color: #1a1206;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(245,166,35,0.4);
  animation: hero-float 3s ease-in-out infinite alternate;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pn-hero__banner { flex-direction: column; padding: 44px 36px 36px; gap: 32px; }
  .pn-hero__right { width: 100%; height: 160px; }
  .pn-hero__visual-card--1 { top: 0; left: 10%; }
  .pn-hero__visual-card--2 { bottom: 0; right: 10%; }
  .pn-hero__subheading { max-width: 100%; }
  .pn-hero__search-pill { max-width: 100%; }
  .pn-hero__autocomplete { max-width: 100%; }
}

@media (max-width: 600px) {
  .pn-hero { padding: 16px 0 20px; }
  .pn-hero__banner { padding: 32px 24px 28px; border-radius: 16px; gap: 24px; }
  .pn-hero__right { display: none; }
  .pn-hero__stats { gap: 16px; flex-wrap: wrap; }
  .pn-hero__search-btn { padding: 10px 16px; font-size: 0.82rem; }
}

/* ── SPONSORED ───────────────────────────────────────── */
/* ── Brands Strip ── */

/* ── Section header right-side control group ── */
.pn-section-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.pn-brands-strip { background:var(--color-bg-soft);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:10px 0; }
.pn-brands-strip__inner { display:flex;align-items:center;gap:16px; }
.pn-brands-strip__label { font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-text-faint);flex-shrink:0;background:var(--color-bg);border:1px solid var(--color-border);padding:4px 10px;border-radius:var(--radius-full); }
.pn-brands-strip__track-wrap { flex:1;overflow:hidden;mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent); }
.pn-brands-strip__track { display:flex;align-items:center;gap:0;animation:brands-scroll 30s linear infinite; }
.pn-brands-strip__track:hover { animation-play-state:paused; }
@keyframes brands-scroll { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.pn-brands-strip__item { display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:6px 20px;text-decoration:none;transition:all var(--transition-fast); }
.pn-brands-strip__item img { height:20px;width:auto;object-fit:contain;opacity:0.55;transition:opacity var(--transition-fast); }
.pn-brands-strip__item:hover img { opacity:0.9; }
.pn-brands-strip__name { font-size:0.82rem;font-weight:700;color:var(--color-text-muted);white-space:nowrap;padding:0 4px;transition:color var(--transition-fast); }
.pn-brands-strip__item:hover .pn-brands-strip__name { color:var(--color-primary); }

/* ── SECTIONS ────────────────────────────────────────── */
.pn-section { padding: var(--space-2xl) 0; }
.pn-section--dark { background:var(--color-bg-soft);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border); }
.pn-section--deals { background:linear-gradient(180deg,var(--color-bg) 0%,rgba(249,115,22,0.04) 100%); }
.pn-section--cats { background:var(--color-bg-soft);border-top:1px solid var(--color-border); }
.pn-products-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg); }

/* ── CAROUSEL ────────────────────────────────────────── */
.pn-carousel-controls { display:flex;gap:8px; }
.pn-carousel-btn { width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast); }
.pn-carousel-btn:hover { border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-glow); }
.pn-carousel-wrap { overflow:hidden; }
.pn-carousel { display:flex;gap:var(--space-lg);transition:transform var(--transition-slow); }
.pn-carousel__slide { flex:0 0 calc(25% - 18px);min-width:calc(25% - 18px); }

/* ── DEALS ───────────────────────────────────────────── */
.pn-deals-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg); }
.pn-deal-card { display:flex;flex-direction:column;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-base);text-decoration:none; }
.pn-deal-card:hover { border-color:var(--color-primary);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.4),0 0 0 1px var(--color-primary); }
.pn-deal-card__image { position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--color-bg-soft); }
.pn-deal-card__image img { width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow); }
.pn-deal-card:hover .pn-deal-card__image img { transform:scale(1.06); }
.pn-deal-card__image-placeholder { width:100%;height:100%;background:var(--color-bg); }
.pn-deal-card__badge { position:absolute;top:10px;right:10px;background:var(--color-primary);color:#111827;font-size:0.68rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-full); }
.pn-deal-card__body { padding:var(--space-md);display:flex;flex-direction:column;gap:6px; }
.pn-deal-card__brand { font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-primary); }
.pn-deal-card__title { font-family:var(--font-display);font-size:0.95rem;font-weight:700;color:var(--pn-foreground);line-height:1.35; }
.pn-deal-card__cat { font-size:0.72rem;color:var(--color-text-faint); }
.pn-deal-card__footer { display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--space-sm);border-top:1px solid var(--color-border); }
.pn-deal-card__from { font-size:0.7rem;color:var(--color-text-faint);display:block; }
.pn-deal-card__amount { font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--color-primary); }
.pn-deal-card__platforms { font-size:0.72rem;color:var(--color-text-faint);background:var(--color-bg-soft);padding:3px 9px;border-radius:var(--radius-full); }

/* ── CATEGORIES GRID ─────────────────────────────────── */
.pn-cats-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md); }
.pn-cat-card { display:flex;flex-direction:column;align-items:center;gap:10px;padding:var(--space-lg) var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);text-align:center;transition:all var(--transition-base);text-decoration:none; }
/* Text-only variant (no icon) */
.pn-cat-card--text { padding:var(--space-md);justify-content:center;min-height:72px;gap:4px; }
.pn-cat-card--text:hover { border-color:var(--color-primary);background:var(--color-primary-glow);transform:translateY(-2px); }
.pn-cat-card:hover { border-color:var(--color-primary);background:var(--color-primary-glow);transform:translateY(-3px); }
.pn-cat-card__icon { font-size:2rem;line-height:1;display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--color-bg-soft);border-radius:var(--radius-md);transition:transform var(--transition-fast); }
.pn-cat-card:hover .pn-cat-card__icon { transform:scale(1.1); }
.pn-cat-card__name { font-family:var(--font-display);font-size:0.88rem;font-weight:700;color:var(--pn-foreground); }
.pn-cat-card__count { font-size:0.72rem;color:var(--color-text-faint); }
.pn-ad-banner { margin:var(--space-xl) 0;border-radius:var(--radius-md);overflow:hidden;border:1px dashed var(--color-border);min-height:90px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-soft); }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width:1200px) { .pn-cats-grid{grid-template-columns:repeat(4,1fr);} .pn-products-grid{grid-template-columns:repeat(3,1fr);} }

/* ── Popular Products / Category Row — Auto-scroll ── */
.pn-autoscroll-wrap { overflow:hidden; }
.pn-autoscroll-controls { display:flex;gap:6px; }
.pn-autoscroll { display:flex;gap:var(--space-md);overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth; }
.pn-autoscroll::-webkit-scrollbar { display:none; }
.pn-autoscroll__slide { flex:0 0 200px;min-width:200px; }
.pn-autoscroll__card { display:flex;flex-direction:column;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;transition:all var(--transition-fast); }
.pn-autoscroll__card:hover { border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.pn-autoscroll__img-wrap { height:140px;overflow:hidden;background:var(--color-bg-soft); }
.pn-autoscroll__img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow); }
.pn-autoscroll__card:hover .pn-autoscroll__img-wrap img { transform:scale(1.04); }
.pn-autoscroll__img-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem; }
.pn-autoscroll__body { padding:10px 12px; }
.pn-autoscroll__brand { font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-primary);display:block;margin-bottom:2px; }
.pn-autoscroll__title { font-size:0.82rem;font-weight:600;color:var(--color-text);line-height:1.35;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.pn-autoscroll__price { font-size:0.85rem;font-weight:800;color:var(--color-primary);font-family:var(--font-display); }

/* ── Category Columns (3-col grid, 2 rows) ─────────────── */

/* Section bg — subtle contrast from plain white sections */
.pn-catcols-section { background: var(--pn-surface-2); }

/* Outer 3-col grid — same gap as products grid */
.pn-catcols-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pn-lg);
}

/* Each column card — same border/radius/bg as pn-card */
.pn-catcol {
  background: var(--pn-card);
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--pn-base), transform var(--pn-base);
}
.pn-catcol:hover {
  box-shadow: var(--pn-shadow-md);
  transform: translateY(-2px);
}

/* Column header — mirrors section-header but contained */
.pn-catcol__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1rem 0.875rem;
  border-bottom: 2px solid var(--pn-border);
  background: var(--pn-card);
}
.pn-catcol__title {
  font-family: var(--pn-font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--pn-foreground);
  margin: 0;
  line-height: 1.1;
}

/* Product rows inside the column */
.pn-catcol__list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Each product row — horizontal card matching pn-card aesthetic */
.pn-catcol-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--pn-border);
  text-decoration: none;
  transition: background var(--pn-fast);
  position: relative;
}
.pn-catcol__list .pn-catcol-item:last-child { border-bottom: none; }
.pn-catcol-item:hover { background: var(--pn-surface-2); }

/* Thumbnail — same contain style as pn-card__image */
.pn-catcol-item__img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: calc(var(--pn-radius) - 4px);
  background: var(--pn-surface-2);
  border: 1px solid var(--pn-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pn-catcol-item__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  transition: transform 0.35s ease;
}
.pn-catcol-item:hover .pn-catcol-item__img img { transform: scale(1.08); }
.pn-catcol-item__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Text info */
.pn-catcol-item__body { flex: 1; min-width: 0; }
.pn-catcol-item__brand {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pn-accent);
  font-family: var(--pn-font-display);
  display: block;
  margin-bottom: 2px;
}
.pn-catcol-item__name {
  font-family: var(--pn-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pn-foreground);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pn-catcol-item:hover .pn-catcol-item__name { color: var(--pn-primary); }

/* Price — right-side block matching pn-card__footer price style */
.pn-catcol-item__price-wrap { flex-shrink: 0; text-align: right; }
.pn-catcol-item__from {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pn-muted);
  display: block;
  line-height: 1;
  margin-bottom: 2px;
}
.pn-catcol-item__price {
  font-family: var(--pn-font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--pn-primary);
  display: block;
  white-space: nowrap;
}
.pn-catcol-item__na { font-size: 0.75rem; color: var(--pn-muted); }


@media (max-width:992px) { .pn-products-grid{grid-template-columns:repeat(2,1fr);} .pn-catcols-grid{grid-template-columns:repeat(2,1fr);} .pn-deals-grid{grid-template-columns:repeat(2,1fr);} .pn-carousel__slide{flex:0 0 calc(33.333% - 12px);min-width:calc(33.333% - 12px);} .pn-cats-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:768px) {
  .pn-cats-grid { grid-template-columns: repeat(3,1fr); }
  .pn-carousel__slide { flex: 0 0 calc(50% - 8px); min-width: calc(50% - 8px); }
  .pn-deals-grid { grid-template-columns: 1fr 1fr; }
  .pn-catcols-grid { grid-template-columns: repeat(2,1fr); }
  .pn-autoscroll__slide { flex: 0 0 175px; min-width: 175px; }
  .pn-section-header-right { gap: 0.5rem; }
}
@media (max-width:480px) { .pn-cat-cols-grid{grid-template-columns:1fr;} .pn-cats-grid{grid-template-columns:repeat(2,1fr);}
@media (max-width: 480px) {
  .pn-cats-grid { grid-template-columns: repeat(2,1fr); }
  .pn-products-grid { grid-template-columns: repeat(2,1fr); gap: var(--space-sm); }
  .pn-deals-grid { grid-template-columns: 1fr; }
  .pn-carousel__slide { flex: 0 0 calc(70% - 8px); min-width: calc(70% - 8px); }
  .pn-catcols-grid { grid-template-columns: 1fr; }
  .pn-autoscroll__slide { flex: 0 0 150px; min-width: 150px; }
}

@media (max-width:640px) { .pn-catcols-grid { grid-template-columns: 1fr; } }