@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/surfaces.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

/* centred product grid - short rows centre instead of pinning left */
.vfMerchGrid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;column-gap:40px;row-gap:96px}
.vfMerchGrid>*{flex:0 0 100%;max-width:100%;height:auto!important;display:flex;flex-direction:column}
.vfMerchGrid>*>*{flex:1 1 auto}
@media(min-width:640px){.vfMerchGrid>*{flex:0 0 calc(50% - 20px);max-width:calc(50% - 20px)}}
@media(min-width:1280px){.vfMerchGrid>*{flex:0 0 calc(33.3333% - 26.667px);max-width:calc(33.3333% - 26.667px)}}

/* Collapsible issue contents. The text is always in the HTML (native <details>);
   only visibility toggles, so search engines still crawl the full table of contents. */
.vfToc{border-bottom:0!important}
.vfTocSum::-webkit-details-marker{display:none}
.vfTocSum::marker{content:""}
.vfBtnRed:hover>.vfRoll i:first-child{transform:translateY(-110%)}
.vfBtnRed:hover>.vfRoll i+i{transform:translateY(0)}
.vfTocCue:hover:before{transform:scaleX(1)}
.vfTocArrow{position:relative;z-index:1}
.vfTocHide{display:none}
.vfToc[open] .vfTocShow{display:none}
.vfToc[open] .vfTocHide{display:inline}
@media(max-width:640px){.vfTocSum{align-items:flex-start}.vfTocCue{width:100%;justify-content:center}}
.vfTocSum:focus-visible{outline:2px solid #a80000;outline-offset:3px}
.vfToc[open] .vfTocArrow{display:inline-block;transform:rotate(180deg)}
@media(max-width:640px){.vfTocSum{flex-wrap:wrap;gap:12px}}

/* Issue spec table - two columns, hairline separated, stacks on narrow screens. */
.vfSpecs{border-top:1px solid rgba(20,16,14,.16)}
.vfSpecRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(20,16,14,.16);font-size:17px}
@media(max-width:520px){.vfSpecRow{grid-template-columns:1fr;gap:3px;padding:12px 0}}
