/* Product card v5 — scaled to the approved ChinaSend wallet-card reference */
:root {
  --pc4-fav-pink: #ff4d8d;
  --pc4-blue: #3b41e3;
  --pc4-blue-dark: #2f35c8;
  --pc4-wordmark-blue: #1377ef;
  --pc4-wordmark-purple: #4037ea;
  --pc4-ink: #12151f;
  --pc4-muted: #545b6b;
  --pc4-line: #e7e9ef;
  --pc4-card-border: #e6e8ef;
  --pc4-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
  --pc4-shadow-hover: 0 26px 72px rgba(15, 23, 42, 0.13);
}

#catalogViewport .catalog-container {
  width: min(100%, 1920px);
  max-width: 1920px;
  padding-left: clamp(0.75rem, 1.1vw, 1.5rem);
  padding-right: clamp(0.75rem, 1.1vw, 1.5rem);
}

#productsGrid.products-grid,
#personalRecHub .products-grid,
#personalRecHubDetail .products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 0.85vw, 14px);
  align-items: stretch;
}

@media (min-width: 560px) {
  #productsGrid.products-grid,
  #personalRecHub .products-grid,
  #personalRecHubDetail .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  #productsGrid.products-grid,
  #personalRecHub .products-grid,
  #personalRecHubDetail .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  #productsGrid.products-grid,
  #personalRecHub .products-grid,
  #personalRecHubDetail .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  #productsGrid.products-grid,
  #personalRecHub .products-grid,
  #personalRecHubDetail .products-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

#catalogViewport .perso-rec-hub {
  width: min(100%, 1920px);
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(0.75rem, 1.1vw, 1.5rem) clamp(0.75rem, 1.1vw, 1.5rem) 0;
}

#catalogViewport .perso-rec-hub-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#catalogViewport .perso-rec-shelf--grid {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

#catalogViewport .perso-rec-shelf--grid .perso-rec-shelf-head {
  margin: 0 0 1.5rem;
  padding: 0;
  border-bottom: none;
  display: block;
}

#catalogViewport .perso-rec-shelf--grid .perso-rec-shelf-titles.header-titles-wrap {
  display: block;
}

#catalogViewport .perso-rec-shelf--grid .perso-rec-shelf-title.catalog-section-title {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f1111;
  line-height: 1.25;
}

#catalogViewport .perso-rec-shelf--grid .perso-rec-shelf-sub.catalog-section-sub {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 400;
  color: #565959;
  line-height: 1.35;
}

#catalogViewport .perso-rec-shelf--grid .perso-rec-shelf-badge,
#catalogViewport .perso-rec-shelf--grid .perso-rec-shelf-nav {
  display: none !important;
}

#detailsViewport {
  --detail-content-max: 1372px;
}

@media (max-width: 1450px) {
  #detailsViewport {
    --detail-content-max: calc(100vw - 72px);
  }
}

@media (max-width: 980px) {
  #detailsViewport {
    --detail-content-max: calc(100vw - 32px);
  }
}

#detailsViewport .perso-rec-hub {
  width: 100%;
  max-width: var(--detail-content-max);
  margin: 0 auto;
  padding: clamp(2rem, 3vw, 3rem) 0 clamp(2.5rem, 4vw, 4rem);
  box-sizing: border-box;
}

#detailsViewport .perso-rec-hub-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#detailsViewport .perso-rec-shelf--grid {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#detailsViewport .perso-rec-shelf--grid .perso-rec-shelf-head {
  margin: 0 0 1.5rem;
}

#detailsViewport .perso-rec-shelf--grid .perso-rec-shelf-nav,
#detailsViewport .perso-rec-shelf--grid .perso-rec-shelf-badge,
#detailsViewport .perso-rec-shelf--grid .perso-rec-shelf-sub {
  display: none !important;
}

#detailsViewport .perso-rec-shelf--grid .perso-rec-shelf-title {
  color: #050505;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0;
}

#detailsViewport .perso-rec-products-grid .product-card {
  min-width: 0;
  max-width: none;
  width: 100%;
}

.product-card.product-card--v4 {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--pc4-card-border);
  border-radius: 0;
  padding: clamp(4px, 1.075cqw, 10px) clamp(4px, 1.075cqw, 10px) clamp(5px, 1.375cqw, 13px);
  box-shadow: var(--pc4-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.product-card.product-card--v4:hover {
  transform: translateY(-2px);
  box-shadow: var(--pc4-shadow-hover);
  border-color: rgba(59, 65, 227, 0.18);
}

.product-card--v4 .product-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1.225 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: #f2f3f6;
  cursor: pointer;
}

.product-card--v4 .product-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
}

.product-card--v4:hover .product-img {
  transform: scale(1.025);
}

.product-card--v4 .card-badge.brand-chinasend {
  position: absolute;
  top: clamp(7px, 2.5cqw, 24px);
  left: clamp(7px, 2.5cqw, 24px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(32px, 8.2cqw, 76px);
  padding: clamp(6px, 2cqw, 18px) clamp(12px, 3.5cqw, 34px);
  border: none;
  border-radius: clamp(5px, 0.75cqw, 7px);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  color: var(--pc4-wordmark-blue);
  font-size: clamp(0.98rem, 4.35cqw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
}

/* Match the TOPBAR ChinaSend wordmark exactly: one continuous cyan→blue→violet
   gradient clipped to the text (var --cs-wordmark, defined in chinasend-theme.css). */
.product-card--v4 .card-badge.brand-chinasend .cs-wordmark {
  background: var(--cs-wordmark, linear-gradient(90deg, #00aaff 0%, #2563ff 48%, #6633ff 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

.product-card--v4 .card-badge.brand-chinasend span {
  margin-left: 0;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-card--v4 .card-status-badge {
  top: clamp(40px, 11cqw, 100px);
  left: clamp(7px, 2.5cqw, 24px);
  border-radius: 4px;
  font-size: 0.65rem;
  padding: 4px 8px;
}

.product-card--v4 .favorite-btn {
  position: absolute;
  /* Share the ChinaSend badge's top edge + box height so the heart sits on the
     same horizontal line as the top-left label. Smaller frame than before. */
  top: clamp(7px, 2.5cqw, 24px);
  right: clamp(7px, 2.5cqw, 24px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 8.2cqw, 76px);
  height: clamp(32px, 8.2cqw, 76px);
  padding: 0;
  border: none;
  border-radius: 0;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  cursor: pointer;
}

.product-card--v4 .favorite-btn .heart-icon {
  width: clamp(17px, 4.3cqw, 40px);
  height: clamp(17px, 4.3cqw, 40px);
  fill: none;
  stroke: #05070c;
  stroke-width: 1.75px;
}

.product-card--v4 .favorite-btn:hover .heart-icon {
  stroke: var(--pc4-fav-pink);
}

.product-card--v4 .favorite-btn.active .heart-icon {
  fill: var(--pc4-fav-pink);
  stroke: var(--pc4-fav-pink);
}

.product-card--v4 .product-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: clamp(5px, 1.6cqw, 15px) clamp(7px, 2.725cqw, 25px) 0;
  gap: 0;
}

.product-card--v4 .product-stock-row,
.product-card--v4 .product-warehouse-tag,
.product-card--v4 .product-orig-price,
.product-card--v4 .btn-card-buynow,
.product-card--v4 .card-btn-row {
  display: none !important;
}

.product-card--v4 .product-factory-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: clamp(4px, 1.1cqw, 10px);
  margin-bottom: clamp(8px, 2.7cqw, 25px);
  padding: clamp(3px, 0.85cqw, 7px) clamp(8px, 2.2cqw, 18px) clamp(3px, 0.85cqw, 7px) clamp(4px, 1cqw, 9px);
  border: 2px solid var(--pc4-blue);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pc4-blue);
  font-size: clamp(0.66rem, 2.45cqw, 1.42rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.05;
  text-transform: uppercase;
}

.product-card--v4 .product-factory-badge__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(17px, 4.4cqw, 40px);
  height: clamp(17px, 4.4cqw, 40px);
  border-radius: 50%;
  background: var(--pc4-blue);
  color: #ffffff;
  font-size: clamp(10px, 2.2cqw, 20px);
  font-weight: 900;
}

.product-card--v4 .product-factory-badge__text {
  font-weight: 900;
}

.product-card--v4 .product-title {
  display: -webkit-box;
  margin: 0 0 clamp(6px, 2cqw, 19px);
  max-height: 2.36em;
  overflow: hidden;
  color: var(--pc4-ink);
  font-size: clamp(0.98rem, 4.25cqw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  cursor: pointer;
}

.product-card--v4:hover .product-title {
  color: var(--pc4-ink);
}

.product-card--v4 .product-price-row {
  margin: 0 0 clamp(14px, 4.15cqw, 39px);
  padding: 0 !important;
  border-top: none !important;
}

.product-card--v4 .product-price {
  color: var(--pc4-blue) !important;
  font-size: clamp(1.12rem, 5.2cqw, 3rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.055em;
}

.product-card--v4 .product-price-cents {
  font-size: inherit;
  font-weight: inherit;
  vertical-align: baseline;
}

.product-card--v4 .product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2.35cqw, 22px);
  margin-top: auto;
  padding-top: clamp(13px, 3.2cqw, 30px);
  border-top: 1px solid var(--pc4-line);
}

.product-card--v4 .product-card-trust {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  gap: clamp(7px, 2.25cqw, 21px);
  overflow: hidden;
  color: var(--pc4-muted);
  font-size: clamp(0.68rem, 2.75cqw, 1.6rem);
  line-height: 1;
}

.product-card--v4 .product-card-by {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #1d2430;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-card--v4 .product-card-by b {
  color: var(--pc4-blue);
  font-weight: 700;
}

.product-card--v4 .product-card-trust-sep {
  flex: 0 0 1px;
  width: 1px;
  height: clamp(18px, 4.15cqw, 39px);
  background: #d5d8df;
}

.product-card--v4 .product-card-verified {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(4px, 1cqw, 9px);
  color: var(--pc4-blue);
  font-weight: 500;
  white-space: nowrap;
}

.product-card--v4 .product-card-verified svg {
  flex: 0 0 auto;
  width: clamp(15px, 3.85cqw, 36px);
  height: clamp(15px, 3.85cqw, 36px);
}

.product-card--v4 .btn-card-addcart {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: clamp(100px, 30cqw, 279px);
  height: clamp(36px, 9cqw, 84px);
  padding: 0 clamp(16px, 4.8cqw, 45px);
  border: none;
  border-radius: 0;
  background: var(--pc4-blue);
  box-shadow: none;
  color: #ffffff;
  cursor: pointer;
  font-size: clamp(0.78rem, 2.95cqw, 1.72rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}

.product-card--v4 .btn-card-addcart:hover {
  background: var(--pc4-blue-dark);
  transform: translateY(-1px);
}

.product-card--v4 .btn-card-addcart:active {
  transform: scale(0.98);
}

.perso-rec-card.product-card--v4 {
  min-width: 0;
}

/* Grid-aligned reco shelf — same layout as #productsGrid */
.perso-rec-shelf--grid .products-grid .product-card {
  min-width: 0;
  max-width: none;
  width: 100%;
}

.perso-rec-shelf--grid {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.perso-rec-shelf--grid .perso-rec-shelf-nav,
.perso-rec-shelf--grid .perso-rec-shelf-badge {
  display: none !important;
}

@media (max-width: 420px) {
  #catalogViewport .catalog-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .product-card--v4 .product-info {
    padding-left: 8px;
    padding-right: 8px;
  }

  .product-card--v4 .product-card-footer {
    gap: 10px;
  }

  .product-card--v4 .btn-card-addcart {
    min-width: 96px;
  }
}

/* Template already prints the € sign — kill app.css's ::before currency */
.product-card--v4 .product-price::before { content: none !important; }

/* Tight cards: drop "by ChinaSend |" so "✓ Verified" never hard-clips */
.product-card--v4 .product-card-verified {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container (max-width: 250px) {
  .product-card--v4 .product-card-by,
  .product-card--v4 .product-card-trust-sep { display: none; }
}
@container (max-width: 250px) {
  .product-card--v4 .btn-card-addcart {
    min-width: 92px;
    padding: 0 10px;
  }
}

/* Homepage grid — square outer card + square action buttons */
.products-grid .product-card.product-card--v4,
#productsGrid .product-card.product-card--v4,
.perso-rec-products-grid .product-card.product-card--v4 {
  border-radius: 0 !important;
}

.products-grid .product-card--v4 .product-img-wrapper,
#productsGrid .product-card--v4 .product-img-wrapper,
.perso-rec-products-grid .product-card--v4 .product-img-wrapper {
  border-radius: 0 !important;
}

.products-grid .product-card--v4 .favorite-btn,
.products-grid .product-card--v4 .btn-card-addcart,
#productsGrid .product-card--v4 .favorite-btn,
#productsGrid .product-card--v4 .btn-card-addcart,
.perso-rec-products-grid .product-card--v4 .favorite-btn,
.perso-rec-products-grid .product-card--v4 .btn-card-addcart {
  border-radius: 0 !important;
}