/* ===================================================================== 6 MUSHROOMS — SHOP / PRODUCT ARCHIVE Left filter rail + strictly aligned product grid. All sizes in px (theme sets html font-size:10px, so rem would be 62.5% off). ===================================================================== */ .six-shop{ /* every colour comes from the global tokens in chrome.css - never hardcode */ --f: var(--ap-font); --ink:var(--ap-ink); --ink-2:var(--ap-ink-2); --muted:var(--ap-mute); --faint:var(--ap-faint); --line:var(--ap-line); --line-soft:var(--ap-line-soft); --line-strong:var(--ap-line-strong); --canvas:var(--ap-canvas); --parch:var(--ap-parchment); --surface:var(--ap-surface); --plum:var(--ap-plum); --plum-h:var(--ap-plum-dark); --plum-tint:var(--ap-plum-tint); --gold:var(--ap-gold); --sale:var(--ap-sale); --ok:var(--ap-stock); --wrap:1280px; --gut:clamp(20px,4vw,48px); --rail:236px; --r:16px; --e:cubic-bezier(.16,1,.3,1); font-family:var(--f); color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .six-shop *{box-sizing:border-box;} .six-shop .sh-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); width:100%;} .six-shop h1,.six-shop h2,.six-shop h3{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.15;} .six-shop p{margin:0;} .six-shop a{text-decoration:none; color:inherit;} .six-shop img{max-width:100%; display:block;} /* ---------- PAGE HEAD — left aligned, compact ---------- */ .six-shop .sh-head{padding:26px 0 22px; border-bottom:1px solid var(--line-soft);} .six-shop .sh-crumb{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--faint); margin-bottom:10px;} .six-shop .sh-crumb a:hover{color:var(--ink); text-decoration:underline;} .six-shop .sh-head h1{font-size:clamp(26px,3vw,36px); letter-spacing:-.025em;} .six-shop .sh-intro{margin-top:8px; max-width:62ch; font-size:15px; line-height:1.5; color:var(--muted);} /* ---------- LAYOUT: rail + main ---------- */ .six-shop .sh-layout{display:grid; grid-template-columns:var(--rail) 1fr; gap:clamp(24px,3vw,44px); align-items:start; padding-block:26px 64px;} /* ---------- LEFT RAIL ---------- */ .six-shop .sh-side{position:sticky; top:64px; max-height:calc(100vh - 84px); overflow-y:auto; padding-right:4px;} .six-shop .sh-side::-webkit-scrollbar{width:5px;} .six-shop .sh-side::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;} .six-shop .sh-side-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;} .six-shop .sh-side-head h2{font-size:15px; letter-spacing:-.01em;} .six-shop .sh-clear{margin-left:auto; font-size:12.5px; color:var(--plum); font-weight:400;} .six-shop .sh-clear:hover{text-decoration:underline;} .six-shop .sh-side-close{display:none; background:none; border:0; font-size:26px; line-height:1; color:var(--muted); cursor:pointer;} .six-shop .sh-fgroup{padding:16px 0; border-top:1px solid var(--line-soft);} .six-shop .sh-fgroup:first-of-type{border-top:0; padding-top:0;} .six-shop .sh-fgroup h3{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:10px;} .six-shop .sh-flist{list-style:none; margin:0; padding:0;} .six-shop .sh-fsub{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--plum); margin:12px 0 5px;} .six-shop .sh-flink{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin:0; border-radius:9px; font-size:15px; color:var(--ink); text-decoration:none; cursor:pointer; transition:background-color .18s var(--e), color .18s var(--e);} .six-shop .sh-flink:hover{background:var(--plum-tint); color:var(--plum);} /* selected = LIGHT: a soft plum wash with plum text and a check, not a dark filled pill. Clean and easy on the eye. */ .six-shop .sh-flink.is-on{background:var(--plum-tint); color:var(--plum); font-weight:700;} .six-shop .sh-flink.is-on .sh-flink-label::before{content:"\2713"; margin-right:8px; font-weight:700;} .six-shop .sh-n{font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums;} .six-shop .sh-flink:hover .sh-n{color:var(--plum);} .six-shop .sh-flink.is-on .sh-n{color:var(--plum);} .six-shop .sh-price-row{display:flex; gap:10px;} .six-shop .sh-field{flex:1; display:flex; flex-direction:column; gap:4px;} .six-shop .sh-field span{font-size:11.5px; color:var(--faint);} .six-shop .sh-field input{width:100%; height:38px; padding:0 10px; font-size:14px; font-family:inherit; color:var(--ink); border:1px solid var(--line); border-radius:9px; background:var(--canvas);} .six-shop .sh-field input:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-tint);} .six-shop .sh-hint{margin-top:8px; font-size:11.5px; color:var(--faint);} .six-shop .sh-check{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:14px; color:var(--ink); cursor:pointer;} .six-shop .sh-check input{width:16px; height:16px; accent-color:var(--plum); flex:0 0 auto;} .six-shop .sh-check em{font-style:normal; color:var(--line-strong);} .six-shop .sh-apply{width:100%; margin-top:6px; height:42px; border:0; border-radius:9999px; cursor:pointer; background:var(--plum); color:var(--canvas); font-family:inherit; font-size:14px; font-weight:700; letter-spacing:-.01em; transition:background-color .2s var(--e), transform .15s var(--e);} .six-shop .sh-apply:hover{background:var(--plum-h); transform:translateY(-1px);} .six-shop .sh-apply:active{transform:translateY(0);} /* ---------- TOOLBAR ---------- */ .six-shop .sh-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); margin-bottom:22px;} .six-shop .sh-count{font-size:14px; color:var(--muted);} .six-shop .sh-count strong{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;} .six-shop .sh-tools{display:flex; align-items:center; gap:10px; margin-left:auto; justify-content:flex-end;} .six-shop .sh-sort{margin-left:auto;} .six-shop .sh-filter-btn{display:none; align-items:center; gap:7px; height:38px; padding:0 15px; cursor:pointer; border:1px solid var(--plum); border-radius:9999px; background:var(--canvas); font-family:inherit; font-size:14px; font-weight:700; color:var(--plum); transition:background-color .2s var(--e);} .six-shop .sh-filter-btn:hover{background:var(--plum-tint);} .six-shop .sh-sort{display:flex; align-items:center; gap:8px;} .six-shop .sh-sort label{font-size:13px; color:var(--muted);} .six-shop .sh-sort select{appearance:none; font-family:inherit; font-size:14px; font-weight:400; color:var(--ink); background:var(--canvas); border:1px solid var(--line); border-radius:9px; padding:8px 32px 8px 12px; cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 11px center;} .six-shop .sh-sort select:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-tint);} /* active filter tags */ .six-shop .sh-active{display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 20px;} .six-shop .sh-tag{display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:9999px; background:var(--parch); font-size:12.5px; color:var(--ink);} .six-shop .sh-tag--clear{background:none; color:var(--plum); font-weight:700;} .six-shop .sh-tag--clear:hover{text-decoration:underline;} /* ---------- GRID — strict row alignment ---------- Each card is a 6-row grid so media / category / name / rating / price / button line up perfectly across every card in the row. */ .six-shop .sh-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,24px);} .six-shop .sh-card{display:grid; grid-template-rows:auto 16px auto 20px auto auto; align-content:start;} .six-shop .sh-media{position:relative; display:block; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; background:var(--parch); margin-bottom:13px;} .six-shop .sh-img{width:100%; height:100%; object-fit:cover; transition:transform .65s var(--e);} .six-shop .sh-card:hover .sh-img{transform:scale(1.05);} .six-shop .sh-img--none{display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:700; color:var(--line-strong); background:linear-gradient(160deg,var(--line-soft),var(--line));} .six-shop .sh-card.is-oos .sh-img{filter:grayscale(.5) opacity(.72);} .six-shop .sh-badge{position:absolute; top:11px; left:11px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:9999px; color:var(--canvas);} .six-shop .sh-badge--sale{background:var(--sale);} .six-shop .sh-badge--oos{background:var(--ap-scrim); left:auto; right:11px;} .six-shop .sh-cat{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--plum); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* two-line clamp keeps every name block exactly the same height */ .six-shop .sh-name{font-size:15.5px; font-weight:700; letter-spacing:-.012em; line-height:1.32; color:var(--ink); margin:3px 0 0; min-height:41px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .six-shop .sh-name a:hover{color:var(--plum);} .six-shop .sh-meta{display:flex; align-items:center; font-size:13px;} .six-shop .sh-rating{color:var(--gold); font-weight:700; letter-spacing:-.01em;} .six-shop .sh-rating em{font-style:normal; font-weight:400; color:var(--faint);} .six-shop .sh-new{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--plum);} .six-shop .sh-price{font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.015em; margin-top:4px; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:5px; flex-wrap:wrap;} .six-shop .sh-price .sh-from{font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0;} .six-shop .sh-price del{color:var(--faint); font-weight:400;} .six-shop .sh-price ins{text-decoration:none; color:var(--sale);} .six-shop .sh-btn{margin-top:11px; display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:40px; padding:10px 16px; border-radius:9999px; font-size:14px; font-weight:700; letter-spacing:-.012em; background:var(--plum); color:var(--canvas); border:0; cursor:pointer; transition:background-color .2s var(--e), transform .15s var(--e);} .six-shop .sh-btn:hover{background:var(--plum-h); transform:translateY(-1px);} .six-shop .sh-btn:active{transform:translateY(0);} .six-shop .sh-btn--solid{background:var(--plum); color:var(--canvas);} .six-shop .sh-btn--solid:hover{background:var(--plum-h);} /* disabled is faded plum, never grey - the brand only uses the one colour */ .six-shop .sh-btn--disabled{background:var(--plum); color:var(--canvas); opacity:.38; pointer-events:none;} .six-shop .sh-btn.added{background:var(--plum); color:var(--canvas);} .six-shop .added_to_cart{display:none !important;} /* ---------- PAGINATION / EMPTY / TRUST ---------- */ .six-shop .sh-pager{display:flex; justify-content:center; gap:8px; margin-top:44px;} .six-shop .sh-page{min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:11px; font-size:14px; color:var(--ink);} .six-shop .sh-page:hover{background:var(--plum-tint); border-color:var(--plum);} .six-shop .sh-page.is-active{background:var(--plum); border-color:var(--plum); color:var(--canvas); font-weight:700;} .six-shop .sh-empty{text-align:center; padding:70px 0;} .six-shop .sh-empty h2{font-size:24px; margin-bottom:10px;} .six-shop .sh-empty p{color:var(--muted); margin-bottom:22px;} .six-shop .sh-empty .sh-btn{display:inline-flex;} .six-shop .sh-trust{background:var(--parch); border-top:1px solid var(--line-soft);} .six-shop .sh-trust-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-block:30px;} .six-shop .sh-trust-row div{display:flex; flex-direction:column; gap:3px;} .six-shop .sh-trust-row strong{font-size:14px; font-weight:700; letter-spacing:-.012em;} .six-shop .sh-trust-row span{font-size:12.5px; color:var(--muted);} /* ---------- MOTION ---------- */ .six-anim .six-shop [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .55s var(--e), transform .55s var(--e); transition-delay:calc(var(--i,0)*50ms);} .six-anim .six-shop [data-reveal].in{opacity:1; transform:none;} /* ---------- RESPONSIVE ---------- */ @media(max-width:1180px){ .six-shop{--rail:210px;} .six-shop .sh-grid{grid-template-columns:repeat(3,1fr);} } @media(max-width:980px){ /* rail becomes an off-canvas drawer */ .six-shop .sh-layout{grid-template-columns:1fr;} .six-shop .sh-side{position:fixed; top:0; left:0; bottom:0; width:min(86vw,320px); max-height:none; z-index:1200; background:var(--canvas); padding:20px 20px 40px; box-shadow:var(--ap-shadow-drawer); transform:translateX(-102%); transition:transform .32s var(--e); overflow-y:auto;} .six-shop .sh-side.is-open{transform:none;} .six-shop .sh-side-close{display:block;} .six-shop .sh-filter-btn{display:inline-flex;} .six-shop .sh-scrim{position:fixed; inset:0; background:var(--ap-veil); z-index:1150; opacity:0; transition:opacity .3s var(--e);} .six-shop .sh-scrim.is-open{opacity:1;} .six-shop .sh-grid{grid-template-columns:repeat(3,1fr);} .six-shop .sh-trust-row{grid-template-columns:repeat(2,1fr);} } @media(max-width:760px){ .six-shop .sh-grid{grid-template-columns:repeat(2,1fr); gap:24px 14px;} .six-shop .sh-card{grid-template-rows:auto 15px auto 19px auto auto;} .six-shop .sh-name{font-size:14.5px; min-height:38px;} .six-shop .sh-price{font-size:15px;} .six-shop .sh-btn{min-height:38px; font-size:13.5px;} .six-shop .sh-head{padding:20px 0 18px;} .six-shop .sh-intro{font-size:14px;} } @media(max-width:430px){ .six-shop .sh-grid{grid-template-columns:repeat(2,1fr); gap:20px 12px;} .six-shop .sh-cat{font-size:10px;} .six-shop .sh-name{font-size:13.5px; min-height:36px;} .six-shop .sh-btn{font-size:12.5px; padding:9px 10px;} .six-shop .sh-trust-row{grid-template-columns:1fr; gap:14px;} /* keep count left / sort hard right even when the toolbar wraps */ .six-shop .sh-toolbar{flex-wrap:wrap; justify-content:space-between;} .six-shop .sh-tools{margin-left:auto; justify-content:flex-end; flex:1 1 auto;} .six-shop .sh-sort{margin-left:auto;} .six-shop .sh-sort select{margin-right:0;} } @media (prefers-reduced-motion:reduce){ .six-shop *{transition:none !important;} .six-anim .six-shop [data-reveal]{opacity:1 !important; transform:none !important;} } /* ===================================================================== MULTI-SELECT CATEGORY FILTER Categories are checkboxes inside the same form as price + availability, so several can be applied together in one submit. ===================================================================== */ .six-shop .sh-fgroup h3{display:flex; align-items:center; gap:8px;} .six-shop .sh-fcount{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9999px; background:var(--plum); color:var(--canvas); font-size:10.5px; font-weight:700; letter-spacing:0; font-variant-numeric:tabular-nums; } .six-shop .sh-fcheck{ display:flex; align-items:center; gap:10px; padding:7px 10px; margin:0; border-radius:9px; cursor:pointer; font-size:14px; color:var(--ink); transition:background-color .18s var(--e); } .six-shop .sh-fcheck:hover{background:var(--plum-tint);} .six-shop .sh-fcheck input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; } /* the box is drawn, so the tick can be animated and coloured on brand */ .six-shop .sh-fcheck-box{ flex:0 0 17px; width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line-strong); background:var(--canvas); position:relative; transition:background-color .16s var(--e), border-color .16s var(--e); } .six-shop .sh-fcheck-box::after{ content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px; border:solid var(--canvas); border-width:0 2px 2px 0; transform:rotate(45deg) scale(.4); opacity:0; transition:opacity .16s var(--e), transform .16s var(--e); } .six-shop .sh-fcheck input:checked ~ .sh-fcheck-box{ background:var(--plum); border-color:var(--plum); } .six-shop .sh-fcheck input:checked ~ .sh-fcheck-box::after{ opacity:1; transform:rotate(45deg) scale(1); } .six-shop .sh-fcheck input:focus-visible ~ .sh-fcheck-box{ outline:none; box-shadow:0 0 0 3px var(--plum-tint); } .six-shop .sh-fcheck-label{flex:1; min-width:0;} .six-shop .sh-fcheck.is-on .sh-fcheck-label{font-weight:700;} .six-shop .sh-fclear-group{ display:inline-block; margin-top:10px; padding-left:10px; font-size:12.5px; font-weight:400; color:var(--plum); } .six-shop .sh-fclear-group:hover{text-decoration:underline;} /* count badge on the mobile Filters button */ .six-shop .sh-filter-btn{gap:8px;} .six-shop .sh-fbadge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9999px; background:var(--plum); color:var(--canvas); font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; } /* ---------- removable active-filter chips ---------- */ .six-shop .sh-tag--x{ display:inline-flex; align-items:center; gap:7px; padding-right:9px; color:var(--ink); transition:background-color .18s var(--e); } .six-shop .sh-tag--x:hover{background:var(--plum-tint);} .six-shop .sh-tag-x{ font-size:15px; line-height:1; color:var(--faint); transition:color .18s var(--e); } .six-shop .sh-tag--x:hover .sh-tag-x{color:var(--plum);} .six-shop .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- sort inside the rail: desktop hides it, mobile shows it ---------- */ .six-shop .sh-fgroup--sort{display:none;} .six-shop .sh-dsort{ width:100%; height:42px; padding:0 34px 0 12px; cursor:pointer; font-family:inherit; font-size:14px; font-weight:400; color:var(--ink); background:var(--canvas); border:1px solid var(--line); border-radius:9px; appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 11px center; } .six-shop .sh-dsort:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-tint);} @media(max-width:900px){ /* the drawer owns sorting on mobile, so the toolbar's sort is redundant */ .six-shop .sh-fgroup--sort{display:block;} .six-shop .sh-toolbar .sh-sort{display:none !important;} /* keep the Apply button reachable without scrolling the whole drawer */ .six-shop .sh-side .sh-apply{ position:sticky; bottom:0; z-index:2; margin-top:14px; box-shadow:0 -10px 18px -8px rgba(20,10,24,.18); } .six-shop .sh-side{padding-bottom:0;} } /* ===================================================================== FILTER RAIL - cleaner, roomier pass Group headings read as real headings (sentence case, 16px) instead of tiny uppercase labels, each carrying its own selected-count. Sort is a radio group so it reads the same way as the category checkboxes. A sticky Clear / Apply bar sits at the bottom of the panel. ===================================================================== */ .six-shop .sh-side-head h2{font-size:22px; letter-spacing:-.022em;} .six-shop .sh-fgroup{padding:20px 0; border-top:1px solid var(--line-soft);} .six-shop .sh-fgroup h3{ font-size:16px !important; font-weight:700 !important; letter-spacing:-.014em !important; text-transform:none !important; color:var(--ink) !important; margin-bottom:12px !important; } .six-shop .sh-fcount{ background:none; color:var(--muted); font-size:15px; font-weight:400; min-width:0; height:auto; padding:0; } .six-shop .sh-fcount::before{content:"(";} .six-shop .sh-fcount::after{content:")";} .six-shop .sh-fsub{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--plum); margin:16px 0 6px; } .six-shop .sh-fgroup--sort .sh-flist{margin-bottom:0;} /* ---------- radio (Sort By) ---------- */ .six-shop .sh-fradio{ display:flex; align-items:center; gap:12px; padding:9px 10px; margin:0; border-radius:9px; cursor:pointer; font-size:15px; color:var(--ink); transition:background-color .18s var(--e); } .six-shop .sh-fradio:hover{background:var(--plum-tint);} .six-shop .sh-fradio input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;} .six-shop .sh-fradio-dot{ flex:0 0 19px; width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--canvas); position:relative; transition:border-color .16s var(--e); } .six-shop .sh-fradio-dot::after{ content:""; position:absolute; inset:3.5px; border-radius:50%; background:var(--plum); transform:scale(0); opacity:0; transition:transform .16s var(--e), opacity .16s var(--e); } .six-shop .sh-fradio input:checked ~ .sh-fradio-dot{border-color:var(--plum);} .six-shop .sh-fradio input:checked ~ .sh-fradio-dot::after{transform:scale(1); opacity:1;} .six-shop .sh-fradio input:focus-visible ~ .sh-fradio-dot{box-shadow:0 0 0 3px var(--plum-tint);} .six-shop .sh-fradio.is-on .sh-fradio-label{font-weight:700;} /* roomier checkboxes to match */ .six-shop .sh-fcheck{padding:9px 10px; font-size:15px; gap:12px;} .six-shop .sh-fcheck-box{flex:0 0 19px; width:19px; height:19px; border-radius:5px;} .six-shop .sh-fcheck-box::after{left:6px; top:2px; width:4px; height:10px;} /* ---------- sticky Clear / Apply bar ---------- */ .six-shop .sh-fbar{ position:sticky; bottom:0; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 0 0; margin-top:6px; background:linear-gradient(to top, var(--canvas) 72%, transparent); } .six-shop .sh-fclear{ display:inline-flex; align-items:center; justify-content:center; height:46px; border-radius:9999px; cursor:pointer; border:1px solid var(--line-strong); background:var(--canvas); font-size:15px; font-weight:700; color:var(--ink); transition:border-color .18s var(--e), background-color .18s var(--e); } .six-shop .sh-fclear:hover{border-color:var(--plum); background:var(--plum-tint); color:var(--plum);} .six-shop .sh-fbar .sh-apply{margin:0; height:46px; font-size:15px;} /* the old standalone clear link in the header is now redundant */ .six-shop .sh-side-head .sh-clear{display:none;} /* card has no button now - the row track for it is gone, and the tile itself is the link. Shroomyz/Nike card discipline: photo, category, name, price. */ .six-shop .sh-card{grid-template-rows:auto auto auto auto auto;} .six-shop .sh-oos{ display:inline-block; margin-top:8px; font-size:12.5px; font-weight:400; color:var(--faint); } /* the whole card lifts on hover instead of a button inviting the click */ .six-shop .sh-card{transition:transform .28s var(--e);} .six-shop .sh-card:hover{transform:translateY(-3px);} /* ===================================================================== SEARCH RESULTS (search.php) - reuses the card grid above; only the page shell and the secondary "pages and articles" list are new. ===================================================================== */ .six-search .sh-body--plain{ display:block; } /* no filter rail here */ .six-search .sh-main{ width:100%; min-width:0; } .six-search .sh-count{ margin-top:8px; font-size:14.5px; color:var(--muted); } .six-search .sh-otherhits{ margin-top:52px; padding-top:30px; border-top:1px solid var(--line); } .six-search .sh-otherhits h2{ font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; } .six-search .sh-otherhits ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; } .six-search .sh-otherhits a{ display:block; padding:13px 14px; border-radius:12px; text-decoration:none; transition:background-color .18s var(--e); } .six-search .sh-otherhits a:hover{ background:var(--plum-tint); } .six-search .sh-oh-title{ display:block; font-size:15.5px; color:var(--ink); margin-bottom:2px; } .six-search .sh-oh-excerpt{ display:block; font-size:13.5px; color:var(--muted); line-height:1.55; } /* ===================================================================== FILTER BAR - Shroomyz-style pills above the grid (desktop), drawer on mobile. The markup is unchanged apart from
/

becoming
/, so every filter name (fcat[], orderby, min_price, max_price, instock) and all the server-side logic still work exactly as before. This is presentation only. ===================================================================== */ @media (min-width:981px){ /* one column: the