/* Men's pages only (men.html, men-spats.html). Loaded after site.css. */

/* sub-menu under the main header, same as the women's */
.subnav { border-bottom:1px solid var(--line); background:var(--paper); }
.subnav .wrap { display:flex; align-items:center; gap:28px; height:46px; }
.subnav .lab { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--stone); }
.subnav a { position:relative; font-size:12px; letter-spacing:.26em; text-transform:uppercase; padding:14px 0; color:var(--stone); }
.subnav a:hover { color:var(--green); }
.subnav a[aria-current="page"] { color:var(--ink); }
.subnav a[aria-current="page"]:after { content:""; position:absolute; left:0; right:.26em; bottom:-1px; height:2px; background:var(--green); }

.line-top { border-top:1px solid var(--line); }
.products.four { grid-template-columns:repeat(4, 1fr); gap:20px; }
.products.four .meta { flex-direction:column; gap:12px; }
.products.four h3 { font-size:17px; }

/* the chooser: design, rash guard colour, marks colour, size */
.vbox #still { position:absolute; inset:0; z-index:1; }
.vbox #still[hidden] { display:none; }
.vside .vbs + .lab, .vside .swatches + .lab, .vside .size + .lab { margin-top:28px; }
.pk { background:none; border:1px solid var(--line); padding:12px 18px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; }
.pk[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.pk:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.vb:disabled, .mk:disabled { opacity:.35; cursor:not-allowed; }
.mk { display:flex; align-items:center; gap:10px; background:none; border:1px solid var(--line); padding:10px 16px 10px 12px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; }
.mk i { width:22px; height:6px; background:var(--c); display:block; }
.mk[aria-pressed="true"] { border-color:var(--ink); }
.mk:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

/* size menu (the same block is meant for the women's and kids pages) */
.size select { appearance:none; -webkit-appearance:none; width:100%; max-width:260px; padding:13px 44px 13px 16px; font:inherit; font-size:14px; color:var(--ink); background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111110' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center; border:1px solid var(--line); border-radius:0; cursor:pointer; }
.size select:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

@media (max-width: 1100px) { .products.four { grid-template-columns:1fr 1fr; gap:36px 20px; } }
@media (max-width: 860px) {
  .subnav .wrap { justify-content:center; gap:22px; height:44px; }
  .subnav .lab { display:none; }
}
@media (max-width: 560px) { .products.four { grid-template-columns:1fr; gap:44px; } }