/* Wedding Stationery Suites page (wedding-suites.html, 21 Oct 2026). Shop skin: cards without outlines on --card-sh, tinted
   icon tiles, tabs in the air, thumbnails on the page grey. */
.wsu{padding-bottom:40px}
.wsu-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;margin:8px 0 34px}
.wsu-hero h1{font-size:clamp(30px,3.6vw,46px);font-weight:500;line-height:1.08;margin:8px 0 14px;letter-spacing:-.4px}
.wsu-hero h1 b{font-weight:500;color:var(--primary)}
.wsu-hero-t>p{font-size:15px;line-height:1.65;color:var(--muted);max-width:56ch;margin:0 0 22px}
.wsu-ctas{display:flex;gap:10px;flex-wrap:wrap}
.wsu-hero-v{position:relative;min-height:470px}
.wsu-hero-v img{position:absolute;display:block;height:auto;object-fit:contain;border-radius:var(--radius);box-shadow:0 14px 40px rgba(30,40,50,.16),0 2px 6px rgba(30,40,50,.08);background:#fff}
.wsu-hero-v .h0{width:52%;left:24%;top:0;z-index:2}
.wsu-hero-v .h1{width:46%;left:0;top:30%;transform:rotate(-5deg)}
.wsu-hero-v .h2{width:34%;right:0;top:22%;transform:rotate(5deg)}
.wsu-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 44px}
.wsu-why>div{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;background:var(--card,#fff);border-radius:var(--radius);box-shadow:var(--card-sh,0 1px 3px rgba(0,0,0,.06));padding:16px}
.wsu-why .as-ic{grid-row:1/4;width:44px;height:44px;border-radius:var(--radius);background:var(--tint);color:var(--icon,var(--primary));display:grid;place-items:center}
.wsu-why .as-ic svg{width:22px;height:22px}
.wsu-why .as-k{font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--eyebrow-ink)}
.wsu-why b{font-size:14.5px;font-weight:500;margin:2px 0 4px}
.wsu-why .as-t{font-size:12.5px;line-height:1.5;color:var(--muted)}
.wsu-sec{margin:0 0 46px}
.wsu-tabs{display:flex;gap:4px;margin:0 0 18px;flex-wrap:wrap}
.wsu-tabs button{border:0;background:transparent;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:9px 16px;font:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;min-height:40px}
.wsu-tabs button:hover{color:var(--ink)}
.wsu-tabs button[aria-selected="true"]{background:var(--tint);color:var(--ink)}
.wsu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.wsu-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px;background:var(--card,#fff);border-radius:var(--radius);box-shadow:var(--card-sh,0 1px 3px rgba(0,0,0,.06));padding:14px}
.wsu-main{display:block;background:var(--page-bg,var(--panel));border-radius:var(--radius-sm);padding:14px;aspect-ratio:3/4}
.wsu-main img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 14px rgba(30,40,50,.14))}
.wsu-side{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.wsu-side a{display:block;background:var(--page-bg,var(--panel));border-radius:var(--radius-sm);padding:8px;aspect-ratio:1}
.wsu-side img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 8px rgba(30,40,50,.12))}
.wsu-cap{grid-column:1/-1;padding:4px 4px 2px}
.wsu-coll{font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--eyebrow-ink)}
.wsu-cap h3{font-size:20px;font-weight:500;margin:2px 0 4px}
.wsu-cap p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 12px}
.wsu-acts{display:flex;gap:8px;flex-wrap:wrap}
.wsu-all{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding-top:6px;border-top:1px solid var(--line)}
.wsu-all[hidden]{display:none}
.wsu-all a,.wsu-piece{display:grid;gap:6px;color:var(--ink);text-decoration:none;font-size:12.5px}
.wsu-all b,.wsu-piece b{font-weight:500;line-height:1.3}
.wsu-ti{display:block;aspect-ratio:1;background:var(--page-bg,var(--panel));border-radius:var(--radius-sm);padding:8px}
.wsu-ti img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 8px rgba(30,40,50,.12))}
.wsu-all a:hover .wsu-ti,.wsu-piece:hover .wsu-ti,.wsu-side a:hover,.wsu-main:hover{box-shadow:var(--ring,0 0 0 2px var(--primary))}
.wsu-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.wsu-piece small{font-size:12px;color:var(--muted);line-height:1.45}
.wsu-empty{color:var(--muted);font-size:14px}
.wsu-faq details{max-width:860px}
@media (max-width:1100px){.wsu-why{grid-template-columns:repeat(2,minmax(0,1fr))}.wsu-grid{grid-template-columns:1fr}}
@media (max-width:760px){.wsu-hero{grid-template-columns:1fr;gap:18px}.wsu-hero-v{min-height:0;aspect-ratio:1.15}.wsu-card{grid-template-columns:1fr}.wsu-side{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.wsu-why{grid-template-columns:1fr}.wsu-side{grid-template-columns:1fr 1fr}.wsu-pieces{grid-template-columns:1fr 1fr}}

/* ONE HERO FOR THE SHOP'S LANDING PAGES (9 Nov 2026, Junaid: "this page doesn't look like the other pages we have of the same sort"): the
   same tinted panel, padding, corner and heading size as Shop By and the family pages (ways.css .pw-hero); the three suite pieces sit
   inside the panel */
.wsu-hero{margin:12px 0 30px;padding:40px;border-radius:var(--radius);background:var(--tint);gap:40px;overflow:hidden}
.wsu-hero h1{font-size:40px;line-height:1.12;letter-spacing:0;margin:6px 0 12px}
.wsu-hero-t>p{font-size:15px;max-width:52ch}
.wsu-hero-v{min-height:380px}
.wsu-hero-v .h0{width:44%;left:28%;top:2%}
.wsu-hero-v .h1{width:40%;left:2%;top:26%}
.wsu-hero-v .h2,.wsu-hero-v img:nth-child(3){width:40%;right:2%;left:auto;top:22%}
@media (max-width:900px){.wsu-hero{grid-template-columns:minmax(0,1fr)!important;padding:24px;gap:20px}.wsu-ctas{flex-wrap:wrap}.wsu-ctas .btn,.wsu-ctas .btn-ghost{flex:1 1 auto;justify-content:center}.wsu-hero h1{font-size:30px}.wsu-hero-v{min-height:300px}}