/* The colour guide box (2 Nov 2026, four designs for Rick). The same white box as the size guide. */
.sgn.cgd{position:fixed;inset:0;z-index:1500;background:rgba(26,26,26,.55);display:none;align-items:center;justify-content:center;padding:20px;animation:sgFade .25s ease both}
.sgn.cgd.on{display:flex}
.sgn.cgd .bx{background:#fff;color:var(--ink,#1A1A1A);width:100%;max-width:760px;min-width:0;position:relative;padding:44px 44px 40px;box-sizing:border-box;max-height:100%;overflow:auto}
.sgn.cgd .x{position:absolute;right:10px;top:10px;width:40px;height:40px;background:none;border:0;cursor:pointer;font:200 28px/1 var(--font-serif);color:var(--ink,#1A1A1A);z-index:2}
.cgd h3{font:300 26px/32px var(--font-serif);margin:0 0 6px}
.cgd .sub{font:300 11px/18px var(--font-sans);letter-spacing:.4px;color:#777;margin:0 0 26px}
.cgd .note{margin:26px 0 0;padding-top:18px;border-top:1px solid rgba(26,26,26,.1);font:300 10.5px/17px var(--font-sans);letter-spacing:.4px;color:#777}
.cgd .k{font:500 8.6px/14px var(--font-sans);letter-spacing:2.2px;text-transform:uppercase;color:var(--ink,#1A1A1A)}
/* the picture: Rick's photo when it exists, a tinted block with "Photo to come" until then */
.cgd .ph{display:block;position:relative;overflow:hidden;background:#ddd}
.cgd .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cgd .ph i{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:300 8.5px/12px var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75);font-style:normal}
.cgd .ph img+i{display:none}
.cgd .ph.sq{aspect-ratio:1/1}
.cgd .ph.wide{aspect-ratio:3/2}  /* 3:2, as every product picture (Rick, 2 Nov) */
.cgd .ph.r32{aspect-ratio:3/2;width:150px;flex:none}
.cgd .tile b{display:block;margin-top:12px;font:400 10px/14px var(--font-sans);letter-spacing:2px;text-transform:uppercase}
.cgd .tile small,.cgd .rw small{display:block;font:300 10px/15px var(--font-sans);letter-spacing:.3px;color:#777;margin-top:4px}
.cgd .in{color:#999}
/* 1 tiles */
.cgd .tiles5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
/* 2 groups */
.cgd .grp{margin:0 0 26px}
.cgd .grp .k{display:block;margin-bottom:4px}
.cgd .grp .fin{display:block;font:300 10.5px/16px var(--font-sans);letter-spacing:.3px;color:#777;margin:0 0 14px}
.cgd .tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:420px}
/* 3 big picture */
.cgd .bigpic{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:28px;align-items:start}
.cgd .bigpic .fin{margin:8px 0 2px;font:200 20px/26px var(--font-serif);color:var(--ink,#1A1A1A)}
.cgd .bigpic .fin{margin:8px 0 20px}
.cgd .sw5{display:flex;gap:12px}
.cgd .sw5 button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.15);box-shadow:0 0 0 2px #fff;cursor:pointer;padding:0}
.cgd .sw5 button.on{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ink,#1A1A1A)}
/* 4 list */
.cgd .rows5{display:flex;flex-direction:column}
.cgd .rw{display:flex;gap:22px;align-items:center;padding:14px 0;border-top:1px solid rgba(26,26,26,.1)}
.cgd .rw:last-child{border-bottom:1px solid rgba(26,26,26,.1)}
.cgd .rw b{display:block;font:400 10px/14px var(--font-sans);letter-spacing:2px;text-transform:uppercase}
@media (max-width:700px){.cgd .tiles5{grid-template-columns:repeat(3,1fr)}.cgd .bigpic{grid-template-columns:1fr}}
@media (max-width:560px){.sgn.cgd .bx{padding:32px 16px 26px}.cgd .tiles5,.cgd .tiles3{grid-template-columns:repeat(2,1fr);gap:10px}.cgd .ph.r32{width:110px}.cgd .rw{gap:14px}}
/* arrows, dots and a count on the picture, as the product gallery's */
.cgd .ph{touch-action:pan-y;user-select:none}
.cgd .ph .ar{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(109,110,112,.72);border:0;padding:0;cursor:pointer;opacity:0;transition:opacity .3s,background-color .2s;font:200 17px/1 var(--font-serif);color:#fff}
.cgd .ph .ar.l{left:10px}.cgd .ph .ar.r{right:10px}
.cgd .ph .ar.l::before{content:"\2039";margin:0 1px 2px 0}.cgd .ph .ar.r::before{content:"\203A";margin:0 0 2px 1px}
@media (hover:hover){.cgd .ph:hover .ar{opacity:1}.cgd .ph .ar:hover{background:#fff;color:#000}}
@media (hover:none){.cgd .ph .ar{opacity:1}}
.cgd .ph .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:3;pointer-events:none}
.cgd .ph .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 2px rgba(0,0,0,.4);position:static;font-size:0}
.cgd .ph .dots i.on{background:#fff}
.cgd .ph .cnt{position:absolute;right:12px;bottom:10px;z-index:3;font:400 8px/12px var(--font-sans);letter-spacing:2px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.cgd .ph img+i{display:none}