/* =====================================================
   Recently Viewed (PLP/PDP shared)
   - Full-bleed section
   - Card width matches PLP grid
   - Headline: EN (eyebrow) + JP (title), centered, normal weight
   ===================================================== */

/* Section */
.plp-recently {
  margin: var(--space-8) 0; /* 48px */
}

/* When the PLP body uses CSS Grid/Flex 2-col, force full width */
.plp-recently--fullbleed {
  grid-column: 1 / -1;
  width: 100%;
}

/* Product grid */
.plp-recently .products {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: var(--space-6);            /* 24px */
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;     /* 16px top */
}

/* Cancel Woo’s float/width to let CSS Grid control layout */
.plp-recently .products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Media safety */
.plp-recently .products li.product a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* -----------------------------
   Heading (EN + JP, centered)
------------------------------ */
.plp-recently .plp-section__title--center {
  text-align: center;
  margin: var(--space-2) 0 var(--space-8); /* 8px 0 16px */
}

.plp-recently .plp-section__eyebrow {
  margin: 0 0 var(--space-2);     /* 0 0 8px */
  font-family: var(--font-latin);
  font-size: var(--fs-14);        /* 14px */
  line-height: var(--lh-tight);
  letter-spacing: .06em;
  color: var(--c-fg-muted);
  font-weight: var(--fw-regular); /* 400 */
}

.plp-recently .plp-title--normal {
  margin: 0;
  font-weight: var(--fw-regular); /* 400 */
  line-height: var(--lh-tight);
  font-feature-settings: var(--jp-font-feature);
  font-size: var(--fs-lg);        /* モバイル基準: 22px にUP */
}

/* ↑ PCで少しだけさらに大きく */
@media (min-width: 768px) {
  .plp-recently .plp-title--normal {
    font-size: var(--fs-xl);      /* 28px */
  }
}

/* -----------------------------
   Responsive (mobile = 2 columns)
------------------------------ */
@media (max-width: 1200px) {
  .plp-recently .products { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
}
@media (max-width: 992px) {
  .plp-recently .products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .plp-recently .products { grid-template-columns: repeat(2, 1fr); }
}
/* 480px以下も“常に2カラム”を維持 */
@media (max-width: 480px) {
  .plp-recently .products { grid-template-columns: repeat(2, 1fr); }
}