.ffb-fur {
--ffb-fg: var(--wp--preset--color--contrast, currentColor);
--ffb-bg: var(--wp--preset--color--base, #fff);
--ffb-line: #ddd;
--ffb-muted: #666;
--ffb-radius: 10px;
max-width: 1100px;
margin: 0 auto;
padding: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--60, 3rem);
box-sizing: border-box;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
.ffb-fur {
--ffb-line: color-mix(in srgb, currentColor 20%, transparent);
--ffb-muted: color-mix(in srgb, currentColor 65%, transparent);
}
}
.ffb-fur *,
.ffb-fur *::before,
.ffb-fur *::after { box-sizing: inherit; }
.ffb-fur a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.ffb-fur__crumbs {
display: flex;
flex-wrap: wrap;
gap: .4rem;
font-size: .9em;
color: var(--ffb-muted);
margin-bottom: 1.25rem;
}
.ffb-fur__notice {
border: 1px solid var(--ffb-line);
border-radius: var(--ffb-radius);
padding: .75rem 1rem;
margin: 0 0 1.5rem;
}
.ffb-fur__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
@media (min-width: 782px) {
.ffb-fur__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; }
} .ffb-fur__media { position: relative; align-self: start; }
.ffb-fur__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--ffb-radius);
border: 1px solid var(--ffb-line);
}
.ffb-fur__swatch {
position: absolute;
right: .75rem;
bottom: .75rem;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.ffb-fur__swatch--solo {
position: static;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: var(--ffb-radius);
border: 1px solid var(--ffb-line);
box-shadow: none;
display: block;
}
.ffb-fur__badge {
position: absolute;
top: .75rem;
left: .75rem;
padding: .2rem .6rem;
border-radius: 999px;
background: #000;
color: #fff;
font-size: .8em;
font-weight: 600;
}
.ffb-fur__title { margin: 0 0 .25rem; line-height: 1.15; }
.ffb-fur__quick { margin: 0 0 1rem; color: var(--ffb-muted); } .ffb-fur__vendors { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.ffb-fur__buy {
display: inline-block;
padding: .55rem 1rem;
border-radius: var(--ffb-radius);
background: var(--ffb-vendor-bg, var(--ffb-fg));
color: var(--ffb-vendor-fg, var(--ffb-bg));
text-decoration: none;
font-weight: 600;
}
.ffb-fur__buy:hover { filter: brightness(1.12); }
.ffb-fur__desc,
.ffb-fur__notes { max-width: 62ch; line-height: 1.6; }
.ffb-fur__specs { margin: 1.25rem 0; }
.ffb-fur__specs > div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: .5rem 0;
border-bottom: 1px solid var(--ffb-line);
}
.ffb-fur__specs dt { color: var(--ffb-muted); flex: none; }
.ffb-fur__specs dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.ffb-fur__actions { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.25rem 0 0; } .ffb-fur__similar { margin-top: 3rem; }
.ffb-fur__h2 { margin: 0 0 1rem; }
.ffb-fur__similar-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 1rem;
}
.ffb-fur__similar-item {
display: block;
text-decoration: none;
color: inherit;
}
.ffb-fur__similar-media { position: relative; display: block; }
.ffb-fur__similar-media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--ffb-radius);
border: 1px solid var(--ffb-line);
}
.ffb-fur__similar-swatch {
position: absolute;
right: .4rem;
bottom: .4rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.ffb-fur__similar-swatch--solo {
position: static;
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: var(--ffb-radius);
border: 1px solid var(--ffb-line);
box-shadow: none;
}
.ffb-fur__similar-name { display: block; margin-top: .4rem; font-size: .95em; }
.ffb-fur__similar-item:hover .ffb-fur__similar-name { text-decoration: underline; }
.ffb-fur__back { margin-top: 2.5rem; } .ffb-fur__terms {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin: 1.25rem 0 0;
padding: 0;
}
.ffb-fur__terms a {
display: inline-block;
padding: .25rem .75rem;
border: 1px solid var(--ffb-line);
border-radius: 999px;
text-decoration: none;
color: inherit;
}
.ffb-fur__terms a:hover { background: var(--ffb-fg); color: var(--ffb-bg); }
.ffb-fur__terms--tags { margin-top: .5rem; }
.ffb-fur__terms--tags a { font-size: .85em; color: var(--ffb-muted); }
.ffb-fur__terms--tags a:hover { color: var(--ffb-bg); } .ffb-fur-archive .navigation.pagination { margin-top: 2rem; }
.ffb-fur-archive .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.ffb-fur-archive .page-numbers { padding: .3rem .7rem; border: 1px solid var(--ffb-line); border-radius: var(--ffb-radius); text-decoration: none; }
.ffb-fur-archive .page-numbers.current { background: var(--ffb-fg); color: var(--ffb-bg); }