/* Just Neckers — "Daybreak" flavour (jn11). A brightened take on Lodge: same
   warm amber + hunter-green spirit, but on a light, airy paper background — no
   dark wood panels, no serif. Modern sans throughout; the colours on the line
   do the talking. */
:root{
	--ink:#33281a;--ink-soft:#4c4231;--sub:#6d6046;--line:#e7dcc4;
	--bg:#faf4e8;--bg2:#f3ead6;--panel:#ffffff;--cream:#fffdf7;
	/* pulled straight from the fabric swatches */
	--blue:#4f8ad8;--blue-d:#3a7cd3;              /* Blue — PMS 279C */
	--green:#077247;--green-d:#065a38;            /* Kelly Green — PMS 356C */
	--orange:#fb5e39;                             /* Orange — PMS 172C */
	--amber:#e8a838;--amber-d:#c6851f;--amber-l:#fff4dc;
	--rope:#c8ab63;--rule:#dccdaa;
	--red:#e2313c;--red-d:#c11f2a;--accent:#c6851f;--wrap:1180px;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body.jn-golden{font-family:"Nunito Sans",-apple-system,"Segoe UI",sans-serif;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
	background-color:var(--bg)}
a{color:var(--accent);text-decoration:none}img{max-width:100%}
h1,h2,h3{margin:0 0 .35em;line-height:1.05}
.mono,.g-spec,.necker-sizes,.loc,.cart{font-family:"Space Mono",ui-monospace,monospace}

/* bright warm paper + a woven tent-canvas twill (subtle diagonal weave) over a
   soft top-down amber wash */
body.jn-golden{
	background-image:
		repeating-linear-gradient(45deg,rgba(92,70,35,.045) 0 1px,transparent 1px 6px),
		repeating-linear-gradient(-45deg,rgba(92,70,35,.03) 0 1px,transparent 1px 6px),
		repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px),
		radial-gradient(1200px 520px at 76% -12%,var(--amber-l),transparent 60%),
		linear-gradient(180deg,#fbf6ec,var(--bg) 340px);
	background-repeat:repeat,repeat,repeat,no-repeat,no-repeat;
	background-size:6px 6px,6px 6px,12px 12px,auto,auto;
	background-attachment:fixed;
}

/* ---- Blue top bar (Blue swatch), white mark + text ---- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:26px;padding:0 26px;height:72px;
	background:
		radial-gradient(46px 18px at 16% 62%,rgba(255,255,255,.20),transparent 72%),
		radial-gradient(64px 22px at 30% 34%,rgba(255,255,255,.14),transparent 72%),
		radial-gradient(52px 18px at 58% 68%,rgba(255,255,255,.16),transparent 72%),
		radial-gradient(72px 24px at 74% 40%,rgba(255,255,255,.12),transparent 72%),
		radial-gradient(48px 18px at 90% 60%,rgba(255,255,255,.16),transparent 72%),
		linear-gradient(180deg,#5f97dd,var(--blue));
	border-bottom:1px solid var(--blue-d);box-shadow:0 2px 12px rgba(30,55,100,.28)}
.brand{display:inline-flex}.brand img{height:42px;display:block}
.mainnav{display:flex;gap:26px;margin-left:10px}
.mainnav a{color:#fff;font-weight:700;font-size:17px;letter-spacing:.01em;padding:6px 0;border-bottom:2px solid transparent}
.mainnav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.7)}.mainnav a.on{color:#fff;border-bottom-color:#fff}
.tools{margin-left:auto;display:flex;align-items:center;gap:14px}
.loc{font-size:12px;font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,.65);border-radius:8px;padding:6px 12px}
.loc:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.cart{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--blue-d);background:#fff;border-radius:8px;padding:8px 16px}
.cart:hover{background:#eef4fc}#cart-count:not(:empty){margin-left:5px;color:var(--green)}
.navtog{display:none;margin-left:auto;background:none;border:0;font-size:26px;cursor:pointer;color:#fff}

/* ---- hero: bright, airy — colours on the line ---- */
.golden-hero{position:relative;overflow:hidden;padding:56px 26px 60px}
.golden-hero .lamp{position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(900px 520px at 80% -10%,rgba(232,168,56,.22),transparent 60%)}
.g-wrap{position:relative;max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.02fr 1.18fr;gap:36px;align-items:center}
.g-wrap>*{min-width:0}

/* copy column */
.g-copy{position:relative}
.kick{display:inline-block;font-family:"Space Mono",monospace;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:#fff;background:var(--red);padding:6px 14px;border-radius:8px;margin-bottom:18px}
.golden-hero h1{font-family:Anton,"Arial Narrow",sans-serif;font-weight:400;font-size:80px;line-height:.92;letter-spacing:.005em;
	text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.golden-hero h1 em{font-style:normal;color:var(--orange)}
.golden-hero p{font-size:19px;color:var(--ink-soft);max-width:28em;margin:0 0 26px}
.g-cta{display:inline-flex;align-items:center;gap:11px;font-family:Oswald,"Nunito Sans",sans-serif;font-weight:600;font-size:17px;letter-spacing:.04em;
	text-transform:uppercase;color:#fff;background:var(--green);padding:15px 30px;border-radius:8px;
	box-shadow:0 8px 20px -8px rgba(58,107,70,.6);transition:.14s}
.g-cta i{font-style:normal;transition:transform .14s}
.g-cta:hover{background:var(--green-d);transform:translateY(-1px)}.g-cta:hover i{transform:translateX(4px)}
#overlay a.g-cta{color:#fff}
/* configurator "Spec Sheet" pill (sits by Random / share bar) */
#overlay a.spec-btn{display:inline-flex;align-items:center;gap:7px;font-family:"Space Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--amber);border-radius:8px;padding:7px 15px;line-height:1}
#overlay a.spec-btn svg{width:15px;height:15px}
#overlay a.spec-btn:hover{background:#f2b74a;color:var(--ink)}

/* atelier spec strip w/ registration corners */
.g-spec{position:relative;display:inline-flex;flex-wrap:wrap;gap:18px;margin-top:30px;padding:12px 18px;
	font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);border:1px solid var(--rule)}
.g-spec b{color:var(--amber);font-weight:700}
.g-spec .tick{position:absolute;width:9px;height:9px;border:2px solid var(--amber)}
.g-spec .tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
.g-spec .tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
.g-spec .bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
.g-spec .br{bottom:-2px;right:-2px;border-left:0;border-top:0}

/* the colour lines: swatches pegged on ropes (Spectrum × Clothesline) */
.g-lines{display:flex;flex-direction:column;gap:30px;padding-top:8px;min-width:0}
.rope{position:relative;display:flex;justify-content:center;gap:14px;padding-top:16px;min-width:0}
.rope:before{content:"";position:absolute;left:-2%;right:-2%;top:4px;height:3px;border-radius:3px;
	background:repeating-linear-gradient(90deg,var(--rope) 0 9px,#b89a5f 9px 11px);box-shadow:0 1px 2px rgba(80,60,20,.25)}
.rope:nth-child(2):before{left:0;right:0;top:2px}
.sw{position:relative;width:52px;height:66px;border-radius:3px 3px 4px 4px;background:var(--c,#ccc);
	box-shadow:0 8px 14px -8px rgba(80,60,20,.4),inset 0 0 0 1px rgba(0,0,0,.12),inset 0 -10px 14px -10px rgba(0,0,0,.28);
	transform:rotate(var(--r,0deg));transform-origin:top center;transition:transform .16s}
/* clothespin */
.sw:before{content:"";position:absolute;top:-9px;left:50%;width:8px;height:18px;margin-left:-4px;border-radius:3px;
	background:linear-gradient(#e0b062,#b6863f);box-shadow:0 1px 2px rgba(0,0,0,.45);z-index:2}
/* string from rope to pin */
.sw:after{content:"";position:absolute;top:-15px;left:50%;width:2px;height:8px;margin-left:-1px;background:var(--rope)}
.sw:hover{transform:rotate(0) translateY(4px)}
.rope .sw:nth-child(3n+1){--r:-4deg}.rope .sw:nth-child(3n+2){--r:2.5deg}.rope .sw:nth-child(3n){--r:5deg}

/* ---- the gallery: neckers pegged on the line, on timber panels ---- */
.pickline{max-width:var(--wrap);margin:0 auto;padding:14px 26px 20px;text-align:center}
.pickline>h2{font-family:"Nunito Sans",sans-serif;font-weight:800;letter-spacing:-.01em;font-size:40px;color:var(--ink);margin:8px 0 2px}
.pickline>.lede{color:var(--sub);font-size:16px;margin:0 auto 6px}
.page-head{display:none}
.necker-shape{margin:34px 0 10px}
.necker-shape-head{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:24px;position:relative}
.necker-shape-head h2{font-family:"Nunito Sans",sans-serif;font-weight:800;letter-spacing:-.01em;font-size:24px;color:var(--ink)}
.necker-sizes{font-size:12px;color:var(--sub)}
/* thin drafting rule under the section head (no rope — that lives on the hero
   and the footer now) */
.necker-shape-head:after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:1px;
	background:linear-gradient(90deg,transparent,var(--rule) 14%,var(--rule) 86%,transparent)}
.necker-grid{padding-top:4px}

/* Each pattern is drawn to spec on an old-school drafting sheet: warm vellum
   paper, a faint engineering grid, registration corner-marks, a mono drawing-
   number and a title-block caption. */
.necker-card{position:relative;text-align:center;padding:22px 16px 12px;border-radius:3px;
	background-color:#fffdf7;
	background-image:linear-gradient(rgba(58,86,122,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(58,86,122,.08) 1px,transparent 1px);
	background-size:16px 16px;background-position:center;
	border:1px solid var(--line);
	box-shadow:0 10px 22px -14px rgba(80,60,20,.28);
	transition:transform .16s,box-shadow .16s,border-color .16s}
/* registration corner brackets */
.necker-card:before,.necker-card:after{content:"";position:absolute;width:12px;height:12px;border:2px solid #9a6a2c}
.necker-card:before{top:9px;left:9px;border-right:0;border-bottom:0}
.necker-card:after{bottom:9px;right:9px;border-left:0;border-top:0}
/* drawing number */
.necker-card .nk-code{position:absolute;top:10px;right:13px;font-family:"Space Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.1em;color:#8a5a2b}
.necker-card:hover{transform:translateY(-4px);border-color:var(--amber);box-shadow:0 20px 32px -18px rgba(80,60,20,.4)}
.necker-thumb{aspect-ratio:1/.72;display:flex;align-items:center;justify-content:center;margin:8px 0 0}
.necker-thumb svg{width:76%;height:auto;filter:drop-shadow(0 4px 6px rgba(60,40,15,.22))}
.necker-card .necker-outline{fill:none;stroke:#4a3a22;stroke-width:1.4;opacity:.75}
/* title-block caption */
.necker-card h3{font-family:"Space Mono",monospace;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
	color:var(--ink);margin:12px 8px 0;padding-top:10px;border-top:1px solid var(--line)}
body.jn-golden .necker-card h3{color:var(--ink)!important}
.necker-card .card-main{display:block;color:inherit;text-decoration:none}
#overlay a.card-spec{display:inline-block;margin-top:9px;font-family:"Space Mono",monospace;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8a5a2b;opacity:.72;transition:opacity .14s,color .14s}
.necker-card:hover .card-spec{opacity:1}
#overlay a.card-spec:hover{color:#c11f2a;opacity:1}

/* ---- the rack: triangle/square tabs that slide the clothesline across ---- */
.rack{position:relative}
.rack-tabs{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:2px solid var(--rule);margin:0 0 22px}
.rack-tab{background:none;border:0;cursor:pointer;font-family:"Nunito Sans",sans-serif;font-weight:800;letter-spacing:-.01em;font-size:26px;color:var(--sub);padding:6px 4px 12px;position:relative;transition:color .15s}
.rack-tab:hover{color:var(--ink)}
.rack-tab.on{color:var(--amber-d)}
.rack-tab.on:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--amber)}
.rack-view{overflow:hidden;padding:8px 0}
.rack-track{display:flex;width:200%;transition:transform .55s cubic-bezier(.62,.02,.2,1)}
.rack-track.to-square{transform:translateX(-50%)}
.rack-pane{width:50%;flex:0 0 50%;padding:0 2px}
.rack-pane .necker-shape-head{margin-bottom:20px}
/* selected hero swatch */
.sw.sel{outline:3px solid var(--ink);outline-offset:2px;z-index:3}
/* size line mirrors its tab: triangle left, square right */
.rack-pane[data-shape="triangle"] .necker-shape-head{align-items:flex-start}
.rack-pane[data-shape="square"] .necker-shape-head{align-items:flex-end}
.rack-pane[data-shape="square"] .necker-sizes{text-align:right}

/* ---- inner pages ---- */
.inner{max-width:var(--wrap);margin:0 auto;padding:30px 26px 20px}
#overlay h1{font-family:"Nunito Sans",sans-serif;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-size:40px;margin:8px 0 16px}
#overlay a{color:var(--amber-d)}.pink,.orange{color:var(--amber-d)!important}
#overlay .grabbag-card{background:var(--panel);border-color:var(--line)}
#overlay input,#overlay textarea,#overlay select{background:#fff;color:var(--ink);border-color:var(--line)}
#overlay .swatches{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;max-width:432px}   /* even 12 / 12 rows */
/* option pills (border size, decoration) — readable on the dark theme */
#overlay .option-pill{color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:8px 15px;transition:.14s}
#overlay .option-pill:hover{border-color:var(--amber);color:var(--amber-d)}
#overlay .option-pill:has(input:checked){border-color:var(--amber);background:var(--amber-l);color:var(--amber-d);font-weight:700}
#overlay .option-pill input{accent-color:var(--amber)}
/* folded-in Custom page info under Your Crest/Logo */
#overlay .decoration-info{margin:12px 0 6px;font-size:12.5px;line-height:1.5;color:var(--sub)}
#overlay .decoration-info p{margin:0 0 6px}
#overlay .decoration-info b{color:var(--ink);font-weight:700}
#overlay .decoration-info a{color:var(--amber)}

/* ---- footer: the clothesline rope IS the wood/green divider ---- */
.foot7{position:relative;z-index:1;margin-top:48px;padding-top:40px;padding-bottom:32px;color:#fff;text-shadow:0 1px 2px rgba(0,40,20,.35);background-color:#077247;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%2734%27%20viewBox%3D%270%200%20160%2034%27%3E%3Cpath%20d%3D%27M2.0%2034%20C1.4%2028.6%20-2.8%2025.0%20-2.0%2022.0%20C-1.2%2025.0%204.4%2028.6%205.0%2034%20Z%27%20fill%3D%27%230a8a55%27%2F%3E%3Cpath%20d%3D%27M12.0%2034%20C11.4%2020.9%2015.2%2012.2%2016.0%205.0%20C16.8%2012.2%2015.6%2020.9%2016.2%2034%20Z%27%20fill%3D%27%230e9a5f%27%2F%3E%3Cpath%20d%3D%27M20.0%2034%20C19.4%2022.3%2022.2%2014.5%2023.0%208.0%20C23.8%2014.5%2023.0%2022.3%2023.6%2034%20Z%27%20fill%3D%27%2312a869%27%2F%3E%3Cpath%20d%3D%27M29.0%2034%20C28.4%2023.6%2030.2%2016.8%2031.0%2011.0%20C31.8%2016.8%2031.4%2023.6%2032.0%2034%20Z%27%20fill%3D%27%23077247%27%2F%3E%3Cpath%20d%3D%27M38.0%2034%20C37.4%2025.0%2038.2%2019.0%2039.0%2014.0%20C39.8%2019.0%2041.6%2025.0%2042.2%2034%20Z%27%20fill%3D%27%23065c3a%27%2F%3E%3Cpath%20d%3D%27M47.0%2034%20C46.4%2026.4%2046.2%2021.2%2047.0%2017.0%20C47.8%2021.2%2050.0%2026.4%2050.6%2034%20Z%27%20fill%3D%27%230a8a55%27%2F%3E%3Cpath%20d%3D%27M57.0%2034%20C56.4%2027.7%2055.2%2023.5%2056.0%2020.0%20C56.8%2023.5%2059.4%2027.7%2060.0%2034%20Z%27%20fill%3D%27%230e9a5f%27%2F%3E%3Cpath%20d%3D%27M66.0%2034%20C65.4%2020.0%2063.2%2010.8%2064.0%203.0%20C64.8%2010.8%2069.6%2020.0%2070.2%2034%20Z%27%20fill%3D%27%2312a869%27%2F%3E%3Cpath%20d%3D%27M75.0%2034%20C74.4%2021.4%2071.2%2013.0%2072.0%206.0%20C72.8%2013.0%2078.0%2021.4%2078.6%2034%20Z%27%20fill%3D%27%23077247%27%2F%3E%3Cpath%20d%3D%27M85.0%2034%20C84.4%2022.8%2080.2%2015.2%2081.0%209.0%20C81.8%2015.2%2087.4%2022.8%2088.0%2034%20Z%27%20fill%3D%27%23065c3a%27%2F%3E%3Cpath%20d%3D%27M95.0%2034%20C94.4%2024.1%2098.2%2017.5%2099.0%2012.0%20C99.8%2017.5%2098.6%2024.1%2099.2%2034%20Z%27%20fill%3D%27%230a8a55%27%2F%3E%3Cpath%20d%3D%27M104.0%2034%20C103.4%2025.4%20106.2%2019.8%20107.0%2015.0%20C107.8%2019.8%20107.0%2025.4%20107.6%2034%20Z%27%20fill%3D%27%230e9a5f%27%2F%3E%3Cpath%20d%3D%27M114.0%2034%20C113.4%2026.8%20115.2%2022.0%20116.0%2018.0%20C116.8%2022.0%20116.4%2026.8%20117.0%2034%20Z%27%20fill%3D%27%2312a869%27%2F%3E%3Cpath%20d%3D%27M123.0%2034%20C122.4%2028.1%20123.2%2024.2%20124.0%2021.0%20C124.8%2024.2%20126.6%2028.1%20127.2%2034%20Z%27%20fill%3D%27%23077247%27%2F%3E%3Cpath%20d%3D%27M133.0%2034%20C132.4%2020.5%20132.2%2011.5%20133.0%204.0%20C133.8%2011.5%20136.0%2020.5%20136.6%2034%20Z%27%20fill%3D%27%23065c3a%27%2F%3E%3Cpath%20d%3D%27M143.0%2034%20C142.4%2021.9%20141.2%2013.8%20142.0%207.0%20C142.8%2013.8%20145.4%2021.9%20146.0%2034%20Z%27%20fill%3D%27%230a8a55%27%2F%3E%3Cpath%20d%3D%27M151.0%2034%20C150.4%2023.2%20148.2%2016.0%20149.0%2010.0%20C149.8%2016.0%20154.6%2023.2%20155.2%2034%20Z%27%20fill%3D%27%230e9a5f%27%2F%3E%3C%2Fsvg%3E"),linear-gradient(180deg,#077247 0%,#01502f 100%);background-repeat:repeat-x,no-repeat;background-position:left top,0 0;background-size:160px 34px,auto}
.foot7 .foot-hills{display:none}
.foot-in{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 26px 34px;font-size:14px}

/* ---- clothesline separator: full-width rope at the seam (homage to the OG
        site). Neckers hang from it down over the green "grass"; the squirrel
        perches on the line — click it (Easter egg). ---- */
.clothesline-sep{position:relative;height:60px;margin-top:34px;z-index:5}
.cl-inner{position:relative;height:100%}
/* the rope — edge to edge, sitting exactly on the boundary */
.cl-rope{position:absolute;left:0;right:0;bottom:0;height:3px;
	background:repeating-linear-gradient(90deg,var(--rope) 0 9px,#b89a5f 9px 11px);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.cl-line{position:absolute;left:0;right:0;bottom:0;height:0;display:flex;justify-content:space-around;align-items:flex-start;padding:0 4vw 0 14vw}
/* a pegged mini necker, hanging below the rope into the footer */
.cl-nk{position:relative;transform:rotate(var(--r,0deg));transform-origin:top center}
.cl-nk svg{display:block;width:50px;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.cl-nk:before{content:"";position:absolute;top:-7px;left:50%;width:8px;height:16px;margin-left:-4px;border-radius:3px;
	background:linear-gradient(#e0b062,#b6863f);box-shadow:0 1px 2px rgba(0,0,0,.4);z-index:2}
.cl-nk:after{content:"";position:absolute;top:-11px;left:50%;width:2px;height:6px;margin-left:-1px;background:var(--rope)}
/* the squirrel — the OG 5-frame run sprite. JS sets --x (position) + --face
   (direction) and toggles .moving (which plays the sprite while it travels);
   pointer-events:none so the flags underneath stay hoverable. It only moves
   when a flag is hovered/tapped, and stays put otherwise. */
/* outer glides (transitioned); inner holds the sprite + flips direction
   INSTANTLY (no transition on scaleX → no 3D squish, like jn1) */
.squirrel{position:absolute;bottom:-2px;left:3%;width:71px;height:69px;z-index:6;pointer-events:none;
	transform:translateX(var(--x,0));transition:transform .34s linear;filter:drop-shadow(0 4px 5px rgba(0,40,20,.35))}
.squirrel i{display:block;width:100%;height:100%;
	background:url(img/squirrel_run.png) no-repeat -71px 0;background-size:cover;
	transform:scaleX(var(--face,1))}
.squirrel.moving i{animation:squirrelRun .12s steps(5) infinite}
@keyframes squirrelRun{from{background-position:0 0}to{background-position:-359px 0}}
/* the hovered flag gives a little swing */
.cl-line .cl-nk{cursor:pointer}
.cl-line .cl-nk:hover{animation:nkswing 1s ease-in-out}
@keyframes nkswing{0%,100%{transform:rotate(var(--r,0deg))}30%{transform:rotate(calc(var(--r,0deg) + 12deg))}65%{transform:rotate(calc(var(--r,0deg) - 8deg))}}
@media(prefers-reduced-motion:reduce){.squirrel,.squirrel.moving i,.cl-line .cl-nk:hover{transition:none;animation:none}}
html{scroll-behavior:smooth}
#pick{scroll-margin-top:88px}   /* clear the sticky header when "Start designing" jumps here */

/* ---- swatch ordering control (studio configurator) ---- */
.swatch-order-bar{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin:0 0 6px}
.swatch-order-bar label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);font-family:"Space Mono",monospace}
#overlay select#swatch-order{font:inherit;font-size:13px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:7px;padding:7px 30px 7px 12px;cursor:pointer;
	background-image: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='%23e8a838' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;-webkit-appearance:none;appearance:none}
#overlay select#swatch-order:focus{outline:2px solid var(--amber);border-color:var(--amber)}

@media(max-width:920px){
	.navtog{display:block}
	.mainnav{position:fixed;inset:72px 0 auto 0;background:var(--blue);flex-direction:column;gap:0;padding:6px 0;border-bottom:1px solid var(--blue-d);box-shadow:0 8px 16px rgba(30,55,100,.25);display:none;z-index:50}
	body.nav-open .mainnav{display:flex}.mainnav a{padding:12px 26px}
	.tools{margin-left:0}
	.g-wrap{grid-template-columns:1fr;gap:30px}.g-copy{order:-1}
	.golden-hero h1{font-size:54px}
	.sw{width:44px;height:56px}
}
@media(max-width:560px){.golden-hero h1{font-size:44px}.sw{width:38px;height:48px}.rope{gap:9px}}

/* ---- normalize legacy scene-era inner pages (faq/contact/custom/blowout) ---- */
#overlay .scroll-pane{height:auto !important;max-height:none !important;overflow:visible !important}
#overlay [style*="background: url"]{background:none !important;height:auto !important;min-height:0 !important;margin-bottom:10px !important}
#overlay .mCustomScrollBox,#overlay .mCSB_container{height:auto !important;overflow:visible !important}
#overlay h1{margin-top:0}
#overlay h3{margin:.15em 0 1.1em;font-weight:500;opacity:.75}
#overlay .question{font-weight:700;margin:1.15em 0 .15em;font-size:1.04em}
#overlay .answer{margin:0 0 .35em}
#overlay .orange,#overlay .pink{color:var(--amber) !important}
#overlay form input,#overlay form textarea,#overlay form select{max-width:100%}

/* ---- inner-page form controls + Blow Out card (light, themed) ---- */
#overlay .lead{font-size:18px;opacity:.85;margin:.2em 0 1.2em}
#overlay input[type=text],#overlay input[type=email],#overlay input[type=tel],#overlay input[type=number],
#overlay textarea,#overlay select{font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;line-height:1.3}
#overlay input:focus,#overlay textarea:focus,#overlay select:focus{outline:2px solid var(--amber);outline-offset:0;border-color:var(--amber)}
#overlay .jn-form,#overlay #grabbag-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0}
#overlay .qty-field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
#overlay .qty-field input{width:110px}
/* Exclude the studio configurator's own controls — swatches, share bar, random,
   link buttons — which studio.css styles fully; this rule is only for the legacy
   content pages' plain buttons/submits. Otherwise the ID specificity here paints
   them all amber and swells the icon buttons into blank pills. */
#overlay button:not(.swatch):not(.sh):not(.btn-random):not(.linkish):not(.rack-tab),#overlay .btn,#overlay input[type=submit]{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:8px;padding:12px 24px;background:var(--green);color:#fff;transition:.14s}
#overlay button:not(.swatch):not(.sh):not(.btn-random):not(.linkish):not(.rack-tab):hover,#overlay .btn:hover,#overlay input[type=submit]:hover{filter:brightness(.95)}
#overlay button:not(.swatch):not(.sh):not(.btn-random):not(.linkish):not(.rack-tab):disabled{opacity:.6;cursor:default}

.grabbag-card{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin:14px 0 8px;padding:24px;border:1.5px solid var(--line);border-radius:7px;background:var(--panel)}
.grabbag-art{display:flex;justify-content:center}
.grabbag-art img{max-width:100%;height:auto}
.grabbag-price{font-size:34px;font-weight:800;color:var(--amber-d);line-height:1}
.grabbag-price small{display:block;font-size:13px;font-weight:500;color:inherit;opacity:.6;margin-top:4px}
.grabbag-desc{margin:14px 0 18px;opacity:.85}
.grabbag-note{font-size:13px;opacity:.6;margin:12px 0 0}
@media(max-width:640px){.grabbag-card{grid-template-columns:1fr}}

/* ---- configurator: readable hint + colourful, legible price table ---- */
#overlay .designer-hint{color:#5a4f3a}
#overlay .price-table{font-size:.95rem;border-radius:8px;overflow:hidden;box-shadow:0 8px 18px -12px rgba(80,60,20,.55);border:1px solid #e6d8b4}
#overlay .price-table th{background:var(--green);color:#fff;border-color:var(--green-d);font-weight:800;padding:.5rem .6rem}
#overlay .price-table td{background:#fff;border-color:#ece0c4;color:var(--ink);padding:.5rem .6rem}
#overlay .price-table td:first-child{font-weight:700}
#overlay .price-table .dim{color:#6f6144;font-weight:600}
/* subtotal: the sky blue, always shown ($0.00 when empty) */
#overlay .price-table td.subtotal-col{color:var(--blue-d);font-weight:800;background:#eaf2fc}
#overlay .price-table th.subtotal-col{background:var(--blue)}
#overlay .price-table th.qty-col{background:var(--green-d)}
#overlay .price-table.no-qty .subtotal-col{display:table-cell}   /* keep Subtotal visible even with no qty */
#overlay .price-note{color:#5a4f3a}
#overlay .bulk-note{color:var(--ink);background:var(--amber-l);border:1px solid #e6d8b4;border-radius:8px;padding:8px 12px;font-size:13px;margin:8px 0 0}
#overlay .bulk-note a{color:var(--amber-d);font-weight:700}
#overlay .size-qty{border-color:#cdbf9c}

/* tighter control spacing (labels close to their swatches, less air between rows) */
#overlay .designer-region,#overlay .designer-option{margin-bottom:.85rem}
#overlay .designer-region h3,#overlay .designer-option h3{margin:0 0 .3rem;font-size:.92rem}
.designer-controls{gap:.9rem !important}
#overlay .swatches{gap:5px}

/* the preview "paper" panel lifts off the page; the necker itself just a whisper */
#overlay .necker-stage{box-shadow:0 14px 30px -14px rgba(40,30,10,.35);border-color:#e7dcc4}
#overlay .necker-stage svg{filter:drop-shadow(0 3px 5px rgba(40,30,10,.16))}

/* tools row (RANDOM | SPEC SHEET | share | COLOUR ORDER) always sits below the
   wide title */
.designer-head h1{flex:1 1 100%}
.head-tools{flex-wrap:wrap;row-gap:10px}
.head-tools .swatch-order-bar{margin:0 0 0 auto}
#overlay .sh-ig:hover{background:radial-gradient(circle at 30% 110%,#fdf497 5%,#fd5949 45%,#d6249f 62%,#285AEB 92%)}
#overlay .sh-ig:hover svg{fill:#fff}