/* =========================================================
   Tom Ford Icon Collection page (shared family styles in tom-ford.css)
   Clean white, with the gold of the Icon T as the accent.
   ========================================================= */

:root { --tfi-gold: #b8913f; }

.tfi-story .eyebrow, .tfi-details .eyebrow { color: var(--tfi-gold); }
.tfi-white { background: transparent; }
.tfi-white picture, .tfi-white img { position: relative; z-index: 1; display: block; background: #fff; }
.tfi-white img { aspect-ratio: 1; object-fit: contain; }

/* ---------- Details ---------- */
.tfi-details { background: #fff; }
.tfi-details__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); list-style: none; padding: 0; }
.tfi-details__img { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-bottom: 2px solid var(--tfi-gold); }
.tfi-details__img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--ease-out); }
.tfi-details__grid li:hover .tfi-details__img img { transform: scale(1.05); }
.tfi-details h3 { margin: 18px 0 8px; font-family: var(--font-title); font-weight: 300; font-size: 26px; line-height: 1.1; }
.tfi-details p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* the Icon collection's switch and tags pick up the gold */
.tf-coll .tf-switch input:checked + label { background: var(--tf-black); color: var(--tfi-gold); }

@media (max-width: 900px) {
  .tfi-details__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}