/* ============================================
   TOP 20 PRODUCTS SHOWCASE MODULE & PAGE
   Matches Degerli Luxury Homepage Design
   ============================================ */

.top-section {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 48px !important;
  background: var(--top-products-section-background, #fffaf6) !important;
  padding: 68px 5vw !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.top-section,
.top-section * {
  box-sizing: border-box;
}

/* --- Intro Column (Left) --- */
.top-intro {
  padding-top: 17px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.top-intro__eyebrow {
  margin: 0 0 14px !important;
  font-size: 10px !important;
  letter-spacing: .24em !important;
  font-weight: 500 !important;
  color: var(--top-products-eyebrow-text, #a70000) !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.top-intro__title {
  margin: 0 !important;
  font-family: "Parkside Regular", "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 4.5vw, 62px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: -.045em !important;
  color: var(--top-products-title-text, #a70000) !important;
}

.top-intro__description {
  display: block !important;
  margin: 20px 0 35px !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: var(--top-products-description-text, #6a5650) !important;
  font-weight: 300 !important;
  max-width: 220px !important;
}

.top-intro__link,
.top-section .text-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 13px !important;
  width: max-content !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid currentColor !important;
  color: var(--top-products-link-text, #211816) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: opacity .2s ease, color .2s ease !important;
}

.top-intro__link:hover,
.top-intro__link:focus,
.top-section .text-link:hover {
  opacity: .75 !important;
  color: var(--top-products-link-hover, #a70000) !important;
  text-decoration: none !important;
}

.top-intro__link svg,
.top-section .text-link svg {
  transition: transform .2s ease !important;
}

.top-intro__link:hover svg,
.top-section .text-link:hover svg {
  transform: translateX(4px) !important;
}

/* --- Rail & Carousel (Right) --- */
.top-products-rail {
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
}

.top-products-carousel {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 4px 0 12px !important;
}

.top-products-carousel .swiper-container {
  width: 100% !important;
  overflow: hidden !important;
}

.top-products-carousel .swiper-wrapper {
  display: flex !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.top-products-slide {
  height: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* --- Product Layout & Thumb Overrides --- */
.top-section .product-layout,
.top-twenty-grid .product-layout {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  display: block !important;
}

.top-section .product-thumb,
.top-twenty-grid .product-thumb {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

.top-section .product-thumb:hover,
.top-twenty-grid .product-thumb:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* --- Product Image & Rank Overlay --- */
.top-section .product-thumb .image,
.top-twenty-grid .product-thumb .image {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 0.85 !important;
  background: var(--top-products-image-background, #f7f3f0) !important;
  overflow: hidden !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.top-section .product-thumb .product-img,
.top-twenty-grid .product-thumb .product-img,
.top-section .product-thumb .product-img > div,
.top-twenty-grid .product-thumb .product-img > div {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.top-section .product-thumb .product-img img,
.top-twenty-grid .product-thumb .product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.55s ease !important;
  mix-blend-mode: multiply !important;
}

.top-section .product-thumb:hover .product-img img,
.top-twenty-grid .product-thumb:hover .product-img img {
  transform: scale(1.035) !important;
}

/* Large Red Rank Number at Bottom-Left of Image */
.top-section .product-thumb .product-rank,
.top-twenty-grid .product-thumb .product-rank {
  position: absolute !important;
  z-index: 5 !important;
  left: 10px !important;
  bottom: 2px !important;
  font-family: "Parkside Regular", "Cormorant Garamond", Georgia, serif !important;
  font-size: 56px !important;
  line-height: 1 !important;
  color: var(--top-products-rank-text, #a70000) !important;
  opacity: .68 !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  pointer-events: none !important;
  user-select: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Circular Heart Wishlist Button at Top-Right of Image */
.top-section .product-thumb .product-card-actions,
.top-twenty-grid .product-thumb .product-card-actions {
  position: absolute !important;
  top: 11px !important;
  right: 11px !important;
  left: auto !important;
  bottom: auto !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 6 !important;
  display: block !important;
}

.top-section .product-thumb .product-card-actions .button-group,
.top-twenty-grid .product-thumb .product-card-actions .button-group {
  width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}

.top-section .product-thumb .product-card-actions .wish-group,
.top-twenty-grid .product-thumb .product-card-actions .wish-group {
  width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.top-section .product-thumb .product-card-actions .btn-wishlist,
.top-twenty-grid .product-thumb .product-card-actions .btn-wishlist {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  color: var(--top-products-product-text, #211816) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

.top-section .product-thumb .product-card-actions .btn-wishlist:hover,
.top-twenty-grid .product-thumb .product-card-actions .btn-wishlist:hover {
  transform: scale(1.08) !important;
  background: #ffffff !important;
}

.top-section .product-thumb .product-card-actions .btn-wishlist .btn-text,
.top-twenty-grid .product-thumb .product-card-actions .btn-wishlist .btn-text {
  display: none !important;
}

/* Hide Stepper, Cart button, Quickview, Rating, Description, Tax, Extra buttons (shipping badge), etc. on Top 20 cards */
.top-section .product-thumb .product-card-actions .cart-group,
.top-twenty-grid .product-thumb .product-card-actions .cart-group,
.top-section .product-thumb .quickview-button,
.top-twenty-grid .product-thumb .quickview-button,
.top-section .product-thumb .product-color-summary,
.top-twenty-grid .product-thumb .product-color-summary,
.top-section .product-thumb .product-labels,
.top-twenty-grid .product-thumb .product-labels,
.top-section .product-thumb .rating,
.top-twenty-grid .product-thumb .rating,
.top-section .product-thumb .description,
.top-twenty-grid .product-thumb .description,
.top-section .product-thumb .price-tax,
.top-twenty-grid .product-thumb .price-tax,
.top-section .product-thumb .stats,
.top-twenty-grid .product-thumb .stats,
.top-section .product-thumb .category-recommendation-label,
.top-twenty-grid .product-thumb .category-recommendation-label,
.top-twenty-grid .product-thumb .promotion-price-wrapper,
.top-section .product-thumb .extra-group,
.top-twenty-grid .product-thumb .extra-group,
.top-section .extra-group,
.top-twenty-grid .extra-group {
  display: none !important;
}

/* Keep cart-discount prices visible, but styled for the editorial top-products cards. */
.top-section .product-thumb .promotion-price-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 3px 6px !important;
  border: 1px solid rgba(167, 0, 0, .18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.top-section .product-thumb .promotion-price {
  color: var(--top-products-rank-text, #a70000) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: .03em !important;
}

/* --- Caption (Subtitle, Product Name, Price, Installment info) --- */
.top-section .product-thumb .caption,
.top-twenty-grid .product-thumb .caption {
  padding: 16px 4px 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
}

.top-section .product-thumb .caption .name,
.top-twenty-grid .product-thumb .caption .name {
  margin: 0 0 11px !important;
  width: 100% !important;
  text-align: left !important;
  display: block !important;
}

.top-section .product-thumb .caption .name::before,
.top-twenty-grid .product-thumb .caption .name::before {
  content: "14 AYAR ALTIN";
  display: block;
  margin: 0 0 7px;
  color: var(--top-products-product-meta-text, #9c7e6b);
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.top-section .product-thumb .caption .name a,
.top-twenty-grid .product-thumb .caption .name a {
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--top-products-product-text, #211816) !important;
  text-align: left !important;
  text-decoration: none !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.top-section .product-thumb .caption .name a:hover,
.top-twenty-grid .product-thumb .caption .name a:hover {
  color: var(--top-products-link-hover, #a70000) !important;
}

.top-section .product-thumb .caption .price,
.top-twenty-grid .product-thumb .caption .price {
  margin: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

.top-section .product-thumb .caption .price .price-normal,
.top-section .product-thumb .caption .price .price-new,
.top-twenty-grid .product-thumb .caption .price .price-normal,
.top-twenty-grid .product-thumb .caption .price .price-new {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--top-products-product-text, #211816) !important;
  line-height: 1.2 !important;
}

.top-section .product-thumb .caption .price .price-old,
.top-twenty-grid .product-thumb .caption .price .price-old {
  display: inline-block !important;
  font-size: 10px !important;
  color: #999 !important;
  text-decoration: line-through !important;
  margin-bottom: 2px !important;
}

.top-section .product-thumb .caption .price::after,
.top-twenty-grid .product-thumb .caption .price::after {
  content: "Peşin fiyatına 3 taksit";
  display: block;
  margin-top: 6px;
  font-size: 8px;
  color: var(--top-products-product-meta-text, #806f68);
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Navigation Buttons --- */
.top-products-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 24px;
  padding-right: 4px;
}

.top-products-btn {
  border: 1px solid var(--top-products-nav-border, #e7ded9);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--top-products-nav-background, #ffffff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--top-products-nav-text, #211816);
  transition: all .2s ease;
  padding: 0;
  outline: none;
}

.top-products-btn:hover:not(.swiper-button-disabled) {
  border-color: var(--top-products-nav-hover-background, #211816);
  background: var(--top-products-nav-hover-background, #211816);
  color: var(--top-products-nav-hover-text, #ffffff);
}

.top-products-btn.swiper-button-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ============================================
   DEDICATED TOP 20 PAGE (/top-20)
   ============================================ */

#product-top-twenty {
  /* The Journal layout row adds top padding before the page panel begins. */
  background: #fffaf6;
}

.top-twenty-page {
  background: #fffaf6;
  min-height: 80vh;
  padding: 40px 0 80px;
}

.top-twenty-page__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
  padding: 0 20px;
  /* Neutralize Journal's global `header` background on this page-only title block. */
  background: transparent !important;
}

/* Journal decorates every desktop header with a white pseudo-element. */
.top-twenty-page__header::before,
.top-twenty-page__header::after {
  content: none !important;
}

.top-twenty-page__eyebrow {
  margin: 0 0 12px !important;
  font-size: 11px !important;
  letter-spacing: .24em !important;
  font-weight: 500 !important;
  color: #a70000 !important;
  text-transform: uppercase !important;
}

.top-twenty-page__title {
  margin: 0 0 16px !important;
  font-family: "Parkside Regular", "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: clamp(44px, 5vw, 68px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: -.045em !important;
  color: #a70000 !important;
}

.top-twenty-page__description {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #6a5650 !important;
  font-weight: 300 !important;
}

.top-twenty-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 36px 24px !important;
  padding: 0 15px !important;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .top-twenty-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px 18px !important;
  }
}

@media (max-width: 900px) {
  .top-section {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 50px 3vw !important;
  }

  .top-twenty-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px 14px !important;
  }
}

@media (max-width: 760px) {
  .top-section {
    display: block !important;
    padding: 50px 18px !important;
  }

  .top-intro {
    padding-top: 0;
    margin-bottom: 28px;
  }

  .top-intro__description {
    max-width: 100% !important;
    margin: 14px 0 24px !important;
  }

  .top-products-nav {
    display: none !important;
  }

  .top-twenty-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 10px !important;
  }

  .top-twenty-page {
    padding: 24px 0 60px;
  }

  .top-twenty-page__header {
    margin-bottom: 35px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-products-btn,
  .top-intro__link svg,
  .top-section .text-link svg,
  .top-section .product-thumb .product-img img,
  .top-twenty-grid .product-thumb .product-img img {
    transition: none !important;
  }
}