/* ============================================================
   CATEGORY NAVIGATION
   Desktop: "Pattern Library" opens a panel of the 14 category
   pages (hover on a mouse, click or keyboard everywhere).
   Phone: the menu drawer lists the same categories.
   Footer: a "Shop by category" column.
   The links live in the HTML so search engines can follow them;
   site-nav.js only opens and closes the panel.
   ============================================================ */

/* ---------- desktop panel ---------- */
.nav-links > li.nav-has-menu{position:relative;display:flex;align-items:center;gap:2px}
.nav-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--color-text-secondary,#5C554E);cursor:pointer;transition:color .2s ease,background-color .2s ease}
.nav-menu-toggle:hover{color:var(--color-text-primary,#1E1B18);background:rgba(30,27,24,.06)}
.nav-menu-toggle:focus-visible{outline:2px solid #B5563A;outline-offset:2px}
.nav-menu-toggle svg{width:14px;height:14px;transition:transform .2s ease}
.nav-has-menu.is-open .nav-menu-toggle svg{transform:rotate(180deg)}

.nav-menu-panel{position:absolute;top:calc(100% + 14px);left:-18px;z-index:1100;width:min(620px,calc(100vw - 32px));padding:20px 20px 16px;border:1px solid #E8E2D9;border-radius:18px;background:#FFFFFF;box-shadow:0 18px 40px rgba(44,26,17,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.nav-menu-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* keeps hover alive across the gap */
.nav-has-menu.is-open > .nav-menu-panel{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease,visibility 0s}

.nav-menu-eyebrow{margin:0 0 10px;padding:0 10px;font-family:var(--font-data,'IBM Plex Mono',monospace);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8C837A}
.nav-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px;margin:0;padding:0;list-style:none}
.nav-menu-grid a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:8px 10px;border-radius:10px;font-family:var(--font-body,'Cabin',sans-serif);font-size:.92rem;font-weight:500;line-height:1.25;color:#1E1B18 !important;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.nav-menu-grid a:hover,.nav-menu-grid a:focus-visible{background:#F5F1EA;color:#B5563A !important}
.nav-menu-grid a:focus-visible{outline:2px solid #B5563A;outline-offset:-2px}
.nav-menu-count{flex-shrink:0;font-family:var(--font-data,'IBM Plex Mono',monospace);font-size:.72rem;color:#8C837A}
.nav-menu-foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;margin:12px 0 0;padding:12px 10px 0;border-top:1px solid #F0EBE1}
.nav-menu-foot a{font-family:var(--font-body,'Cabin',sans-serif);font-size:.9rem;font-weight:700;color:#1E1B18 !important;text-decoration:none}
.nav-menu-foot a:hover{color:#B5563A !important}
.nav-menu-foot .nav-menu-free{font-weight:500;color:#5C554E !important}

@media (max-width:1100px){.nav-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-menu-panel{width:min(460px,calc(100vw - 32px))}}
@media (prefers-reduced-motion:reduce){.nav-menu-panel,.nav-menu-toggle svg{transition:none}}

/* ---------- phone drawer ---------- */
.menu-cats{margin:0}
.menu-cats > summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;font-family:var(--font-data,'IBM Plex Mono',monospace);font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8C837A}
.menu-cats > summary::-webkit-details-marker{display:none}
.menu-cats > summary svg{width:16px;height:16px;transition:transform .2s ease}
.menu-cats[open] > summary svg{transform:rotate(180deg)}
.menu-cats > summary:focus-visible{outline:2px solid #B5563A;outline-offset:2px;border-radius:6px}
.menu-cats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:4px 0 0;padding:0;list-style:none}
.menu-cats-grid a{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;padding:8px 12px;border:1px solid #E8E2D9;border-radius:12px;background:#FFFFFF;font-family:var(--font-body,'Cabin',sans-serif);font-size:.9rem;font-weight:500;line-height:1.2;color:#1E1B18 !important;text-decoration:none}
.menu-cats-grid a:active{background:#F5F1EA}
.menu-cats-grid .menu-cat-count{flex-shrink:0;font-family:var(--font-data,'IBM Plex Mono',monospace);font-size:.7rem;color:#8C837A}
.menu-cats-all{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px;border-radius:12px;background:#1A1714;color:#FFFFFF !important;font-family:var(--font-body,'Cabin',sans-serif);font-weight:700;font-size:.92rem;text-decoration:none}
.menu-cats-all:active{background:#B5563A}

/* ---------- footer column ---------- */
.footer-grid.has-cats{grid-template-columns:1.3fr 1fr 1.7fr 1fr}
.footer-links.footer-cats ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
@media (max-width:1024px){.footer-grid.has-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}}
@media (max-width:600px){.footer-links.footer-cats{grid-column:1/-1}}

/* card title link (shop and category pages): looks like the title, followable by search engines */
.shop-card-link{color:inherit !important;text-decoration:none !important}