
.tf-pdp{background:var(--tf-paper);padding-bottom:3.2rem}
.product{display:grid;gap:2.4rem;margin-top:1.6rem;align-items:start}
@media screen and (min-width:46.875em){.product{grid-template-columns:minmax(0,min(var(--gbox),44%)) minmax(0,1fr);gap:2.8rem}}
@media screen and (min-width:61.875em){.product{grid-template-columns:var(--gbox) minmax(0,1fr);gap:4.8rem}.product__media-wrapper{position:sticky;top:2rem}}
@media screen and (min-width:61.875em) and (max-width:73.748em){.product__media-wrapper{top:13rem}}
.product__media-wrapper{min-width:0;width:100%;max-width:var(--gbox);justify-self:center}
media-gallery{display:grid;gap:1rem}
.product__media{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:.1rem solid var(--tf-line);background:#fff;cursor:zoom-in;overflow:hidden}
.product__media img{display:block;width:100%;height:100%;object-fit:contain;max-width:none}
.product__media-icon{position:absolute;right:1rem;bottom:1rem;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;background:var(--tf-paper);border:.1rem solid var(--tf-line);color:var(--tf-ink)}
.thumbnail-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}
.thumbnail{display:block;width:100%;aspect-ratio:1;padding:0;border:.1rem solid var(--tf-line);background:#fff;cursor:pointer;overflow:hidden}
.thumbnail[aria-current="true"]{border-color:var(--tf-ink);box-shadow:inset 0 0 0 .1rem var(--tf-ink)}
.thumbnail img{display:block;width:100%;height:100%;object-fit:contain}
.product__info-wrapper{min-width:0}
.product__info-container{display:grid;gap:1.4rem;min-width:0}
.product__info-container .tf-kicker{margin:0}
.product__title h1{font-size:clamp(3rem,3.4vw,4.6rem)}
.product__lead{margin:0;font-size:1.8rem;color:var(--tf-ink2);max-width:60rem}
.tf-pricebox{display:grid;gap:1.6rem;padding:1.6rem;border:.1rem solid var(--tf-ink);background:var(--tf-paper)}
.tf-pricebox__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.4rem}
.price--large{font-size:3rem;font-weight:700;line-height:1}
.tf-pricebox__pack{font-family:var(--tf-mono);font-size:1.3rem;color:var(--tf-ink2)}
variant-selects{display:block}
.product-form__input{border:0;margin:0;padding:0;min-width:0}
.form__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;margin-bottom:1rem;padding:0;font-family:var(--tf-mono);font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase}
.form__label b{font-family:var(--font-body-family);font-size:1.7rem;letter-spacing:0;text-transform:none}
.tf-shades__w{flex:1 1 100%;font-family:var(--font-body-family);font-size:1.4rem;letter-spacing:0;text-transform:none;color:var(--tf-ink2);min-height:2.2rem}
.tf-shades__row{display:grid;gap:.4rem;margin-bottom:1rem}
.tf-shades__row:last-child{margin-bottom:0}
.tf-shades__h{font-family:var(--tf-mono);font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tf-ink2)}
.tf-shades__set{display:flex;flex-wrap:wrap;gap:.6rem}
.tf-shades input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.tf-shades label{display:inline-flex;align-items:center;gap:.6rem;min-height:4.4rem;padding:.4rem 1rem .4rem .5rem;border:.1rem solid var(--tf-line);background:var(--tf-paper);cursor:pointer;user-select:none}
.tf-shades label i{width:3rem;height:3rem;border-radius:50%;flex:none;box-shadow:inset 0 0 0 .1rem rgba(42,34,32,.18)}
.tf-shades label .tf-code{font-size:1.3rem;font-weight:500}
.tf-shades label:hover{border-color:var(--tf-ink)}
.tf-shades input:checked+label{border-color:var(--tf-ink);box-shadow:inset 0 0 0 .1rem var(--tf-ink)}
.tf-shades input:focus-visible+label{outline:.2rem solid var(--tf-clay);outline-offset:.2rem}
.product-form__buttons{display:grid;gap:.4rem}
.product-form__submit{width:100%;min-height:5.6rem;font-size:1.5rem}
.tf-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:.1rem solid var(--tf-ink);border-left:.1rem solid var(--tf-line)}
.tf-trio li{display:grid;gap:.3rem;align-content:start;padding:1.2rem 1rem;border-right:.1rem solid var(--tf-line);border-bottom:.1rem solid var(--tf-line);min-width:0}
.tf-trio b{font-family:var(--font-heading-family);font-weight:400;font-size:2.4rem;line-height:1.05;overflow-wrap:anywhere}
.tf-trio span{font-size:1.3rem;color:var(--tf-ink2)}
@media screen and (max-width:29.998em),screen and (min-width:46.875em) and (max-width:61.873em){.tf-trio{grid-template-columns:1fr}.tf-trio li{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:baseline;gap:1rem}}
.tf-about{display:grid;gap:2.4rem}
.tf-about__text{min-width:0}
.tf-about__text h2{margin-bottom:1.8rem}
.tf-about__text p{margin:0 0 1.4rem;font-size:1.75rem;break-inside:avoid}
@media screen and (min-width:61.875em){.tf-about__text{columns:2;column-gap:5.6rem}.tf-about__text h2{column-span:all}}
.tf-about .tf-facts{margin:0}
.tf-about .tf-meters{margin:0}
@media screen and (min-width:46.875em){.tf-meters{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.2rem}.tf-minus ul{columns:2;column-gap:4rem}.tf-minus li{break-inside:avoid}}
.tf-howto{display:grid;gap:2.8rem;align-items:start}
.tf-howto__text{min-width:0;display:grid;gap:1.6rem}
.tf-howto__note{margin:0;font-size:1.55rem}
.tf-howto__fig{margin:0;overflow:hidden;display:flex;justify-content:center;justify-self:start;line-height:0}
.tf-howto__fig img{display:block;width:100%;height:auto}
@media screen and (min-width:37.5em){.tf-howto{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:3.2rem}.tf-howto__fig{justify-self:end;max-width:44vw}}
@media screen and (min-width:61.875em){.tf-howto{gap:5.6rem}}
.tf-howto--slim{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:1.6rem}
.tf-howto--slim .tf-howto__fig{max-width:34vw}
.tf-table--shades{min-width:0}
.tf-table--shades td:last-child{width:1%;white-space:nowrap}
@media screen and (max-width:43.748em){.tf-table--shades td:last-child{width:auto;justify-content:flex-end}.tf-table--shades td:last-child::before{content:none}}
