.fabrics-main .breadcrumbs { padding-bottom: 20px; }
.fabric-hero { position: relative; min-height: 430px; overflow: hidden; isolation: isolate; color: #fff; background: #485047; }
.fabric-hero > img, .fabric-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.fabric-hero > img { z-index: -2; object-fit: cover; object-position: center 52%; }
.fabric-hero-shade { z-index: -1; background: linear-gradient(90deg, #101b18d9 0%, #111c197a 48%, #111c1920 100%), linear-gradient(0deg, #101b1852 0%, transparent 60%); }
.fabric-hero-copy { max-width: 580px; padding: 74px 48px 68px; }
.fabric-hero-copy .section-kicker { color: #e3e7e2; }
.fabric-hero-copy h1 { margin: 16px 0 14px; font-size: 52px; line-height: 1.1; font-weight: 500; }
.fabric-hero-copy p { max-width: 480px; margin: 0 0 25px; font-size: var(--text-base); line-height: 1.7; color: #f1f3f0; }
.fabrics-main .button { min-height: 46px; padding-inline: 19px; }
.fabric-featured { padding-block: 62px 68px; }
.fabric-section-heading { display: block; }
.fabric-section-heading h2 { margin: 11px 0 0; font-size: var(--text-section); line-height: 1.3; font-weight: 400; }
.fabric-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.fabric-card { position: relative; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; color: #fff; background: #35413a; }
.fabric-card-media { position: absolute; inset: 0; overflow: hidden; }
.fabric-card-media > img, .fabric-card-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.fabric-card-media > img { z-index: 0; display: block; object-fit: cover; transition: transform .35s ease; }
.fabric-card-shade { z-index: 1; background: linear-gradient(0deg, #101814d9 0%, #10181457 37%, transparent 74%); transition: background .25s ease; }
.fabric-card-copy { position: absolute; z-index: 2; inset: auto 20px 18px; }
.fabric-card-copy > span { display: block; margin-bottom: 8px; font-size: var(--text-xs); color: #e4ebe5; }
.fabric-card-copy h3 { max-width: 100%; margin: 0; color: #fff; font-size: var(--text-lg); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; text-shadow: 0 1px 8px #0005; }
.fabric-card-description { position: absolute; z-index: 3; inset: auto 20px 92px; margin: 0; color: #f5f7f5; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; opacity: 0; transform: translateY(8px); text-shadow: 0 1px 5px #0008; transition: opacity .2s ease, transform .2s ease; }
.fabric-card:hover .fabric-card-description, .fabric-card:focus .fabric-card-description { opacity: 1; transform: translateY(0); }
.fabric-card:hover .fabric-card-shade, .fabric-card:focus .fabric-card-shade { background: linear-gradient(0deg, #101814f5 0%, #101814dc 55%, #10181460 100%); }
.fabric-card:hover .fabric-card-media > img, .fabric-card:focus .fabric-card-media > img { transform: scale(1.04); }
.fabric-card:focus-visible { outline: 3px solid #245943; outline-offset: 3px; }
.fabric-note { max-width: 900px; margin: 24px 0 0; color: #727b75; font-size: var(--text-xs); line-height: 1.7; }
.fabrics-main .category-cta { margin-top: 0; }
@media (max-width: 900px) {
  .fabric-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fabric-hero { min-height: 360px; }
  .fabric-hero-copy { padding: 55px 25px 42px; }
  .fabric-hero-copy h1 { font-size: 38px; }
  .fabric-card-grid { gap: 12px; margin-top: 24px; }
  .fabric-card-copy { inset: auto 13px 13px; }
  .fabric-card-copy h3 { font-size: var(--text-base); }
  .fabric-card-copy > span { font-size: 10px; }
  .fabric-featured { padding-block: 38px 42px; }
}
@media (max-width: 480px) {
  .fabric-card-grid { gap: 9px; }
  .fabric-card-copy { inset: auto 10px 10px; }
  .fabric-card-copy h3 { font-size: var(--text-sm); }
}
@media (max-width: 760px), (hover: none) {
  .fabric-card { display: flex; flex-direction: column; height: max-content; aspect-ratio: auto; color: #202923; background: #fff; border: 1px solid #dfe4df; }
  .fabric-card-media { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; background: #35413a; }
  .fabric-card-description { position: static; padding: 12px 13px 14px; color: #4c5750; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; opacity: 1; transform: none; text-shadow: none; transition: none; }
  .fabric-card:hover .fabric-card-description, .fabric-card:focus .fabric-card-description { opacity: 1; transform: none; }
  .fabric-card:hover .fabric-card-shade, .fabric-card:focus .fabric-card-shade { background: linear-gradient(0deg, #101814d9 0%, #10181457 37%, transparent 74%); }
  .fabric-card:hover .fabric-card-media > img, .fabric-card:focus .fabric-card-media > img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fabric-card-media > img, .fabric-card-description, .fabric-card-shade { transition: none; }
}