/*
Theme Name: Dayton Stickers
Author: Dayton Sign Shop
Version: 1.2.3
Description: A focused storefront for the Dayton Sign Shop sticker builder.
*/
:root{--gold:#ffba24;--ink:#18191c;--paper:#faf9f5;--line:#deddd6}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,sans-serif}a{color:inherit}button,input,select,textarea{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #805100;outline-offset:4px}.skip{position:absolute;left:20px;top:-100px;z-index:100}.skip:focus{top:10px;background:white;padding:10px}.topline{background:var(--ink);color:white;text-align:center;font-size:12px;letter-spacing:.12em;padding:8px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1320px;margin:auto;padding:16px 32px}.logo{display:flex;align-items:center;text-decoration:none;gap:14px;font-weight:900;line-height:1.1}.logo img{width:100px;height:72px;object-fit:contain}.logo small{display:block;font-size:11px;letter-spacing:.2em;margin-top:8px;font-weight:500}.nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:bold}.nav a{text-decoration:none}.button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:13px 23px;font-weight:800;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}.button:hover{transform:translateY(-2px)}.hero{max-width:1320px;margin:auto;padding:40px 32px 64px;display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;text-transform:uppercase}.hero h1{font-size:clamp(52px,6.7vw,94px);line-height:.98;letter-spacing:-.065em;margin:20px 0 24px;font-weight:900}.hero h1 span{display:block;color:#906000}.hero p{font-size:18px;max-width:490px;color:#505154}.hero .button{margin:12px 0}.small{font-size:12px!important;color:#606166}.hero-art{position:relative;padding:18px 20px 26px;background:var(--gold);border:2px solid var(--ink);border-radius:24px;transform:rotate(2deg);box-shadow:8px 8px 0 var(--ink)}.hero-art img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:12px;border:2px solid var(--ink)}.hero-art .caption{display:flex;justify-content:space-between;font-size:12px;font-weight:800;padding-top:16px}.stamp{position:absolute;right:-20px;top:-20px;width:110px;height:110px;background:var(--paper);border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;font-weight:900;transform:rotate(12deg)}.benefits{background:var(--gold);border-block:2px solid var(--ink);display:flex;justify-content:center;gap:65px;padding:18px 25px;font-size:13px;font-weight:800}.section{max-width:1320px;padding:70px 32px;margin:auto}.section h2{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.045em;margin:12px 0 18px}.section-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.section-intro p{max-width:440px;color:#606166}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:28px 0 40px}.step{display:flex;gap:14px;align-items:start}.step b{background:var(--gold);border:1.5px solid var(--ink);border-radius:50%;width:35px;height:35px;display:grid;place-items:center;flex-shrink:0}.step h3{margin:0;font-size:16px}.step p{margin:5px 0;color:#606166;font-size:14px}.builder-wrap{scroll-margin-top:20px}.dss-studio{max-width:none!important;margin:0!important;border:1px solid var(--line)!important;box-shadow:0 8px 35px #00000008;background:white!important;border-radius:14px!important}.dss-studio button{cursor:pointer}.materials{background:var(--ink);color:white}.materials>.section{padding-block:65px}.material-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}.material{border:1px solid #4e4e50;border-radius:12px;padding:20px}.material .swatch{height:110px;border-radius:7px;margin-bottom:20px;background:#fff}.material .holo{background:linear-gradient(130deg,#ffe4a0,#bbf6e2,#c6b2f3,#f1a9c3,#fff3b2)}.material .glitter{background-color:#aaa;background-image:radial-gradient(white 1px,transparent 1px),radial-gradient(#333 1px,transparent 1px);background-size:7px 9px,11px 8px;background-position:0 0,3px 5px}.material .reflective{background:linear-gradient(120deg,#555,#f8f8f8 48%,#999 55%,#d1d1d1)}.material h3{margin:0;font-size:20px}.material p{font-size:14px;color:#c5c5c8}.material small{color:var(--gold)}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:75px}.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq summary{cursor:pointer;font-weight:bold}.faq details p{color:#505154;font-size:15px}.helpbox{background:var(--gold);padding:24px;border:1.5px solid var(--ink);border-radius:12px;margin-top:26px}.site-footer{border-top:1px solid var(--line);padding:35px 32px;max-width:1320px;margin:auto;display:flex;justify-content:space-between;gap:30px;font-size:13px}.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}.content-page{min-height:55vh;max-width:1160px;margin:20px auto 70px;padding:24px}.content-page h1{font-size:44px;line-height:1.1}.woocommerce input.input-text,.woocommerce select,.woocommerce textarea{padding:12px;border:1px solid #888;border-radius:4px;background:white}.woocommerce table.shop_table{background:white}.woocommerce .col2-set{display:flex;gap:30px}.woocommerce .col2-set>div{flex:1;float:none!important;width:auto!important}.woocommerce #payment{background:#efeee9}.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--gold);color:var(--ink)}.woocommerce-error,.woocommerce-message,.woocommerce-info{background:white;padding:18px;border-top:3px solid var(--gold)}.site-main{overflow:hidden}@media(max-width:850px){.site-header{padding:14px 20px}.nav a:not(.cart-link){display:none}.logo img{width:75px;height:55px}.logo strong{font-size:14px}.hero{grid-template-columns:1fr;padding:30px 24px 48px;gap:35px}.hero h1{font-size:62px}.hero-art{max-width:540px;margin:10px 10px 0}.stamp{width:85px;height:85px;font-size:13px;right:-12px}.benefits{gap:18px;font-size:11px;flex-wrap:wrap}.section{padding:45px 22px}.section-intro{display:block}.steps{grid-template-columns:1fr;gap:18px}.material-grid{grid-template-columns:1fr 1fr}.faq{grid-template-columns:1fr;gap:20px}.site-footer{flex-direction:column;padding:30px 22px}.woocommerce .col2-set{display:block}.content-page h1{font-size:34px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button:hover{transform:none}}
/* Movable samples sit behind the existing hero content. */
.hero{position:relative;isolation:isolate;padding-top:90px;padding-bottom:260px}
.hero>div:not(.hero-sticker-layer){position:relative;z-index:2}
.hero>div:first-of-type+.hero-copy{background:rgba(250,249,245,.94);border-radius:20px;padding:22px}
.hero-sticker-layer{position:absolute;z-index:0;left:50%;top:0;transform:translateX(-50%);width:min(100vw,1800px);height:100%;pointer-events:none}
.hero-sticker{position:absolute;width:clamp(155px,18vw,245px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;line-height:0;touch-action:none;cursor:grab;pointer-events:auto;transform:rotate(var(--sticker-rotation));filter:drop-shadow(2px 5px 3px #18191c35);transition:filter .15s}
.hero-sticker canvas{display:block;width:100%;height:auto;pointer-events:none}
.hero-sticker:hover,.hero-sticker:focus-visible{filter:drop-shadow(4px 9px 5px #18191c55)}
.hero-sticker:focus-visible{outline:3px dashed #906000;outline-offset:6px;border-radius:12px}
.hero-sticker.is-dragging{cursor:grabbing;filter:drop-shadow(8px 14px 7px #18191c55)}
.sticker-gloss{position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,#fff7 39%,transparent 52%,#fff2 68%,transparent 80%);mask-size:100% 100%;mask-repeat:no-repeat;pointer-events:none;opacity:.55}
.hero-sticker[data-finish="glitter"] .sticker-gloss{opacity:.8}
.hero-sticker[data-finish="reflective"] .sticker-gloss{opacity:.9}
.sticker-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:11px!important;white-space:nowrap;color:#64615a!important;letter-spacing:.02em;margin:0!important}
.sticker-hint span{display:block;text-align:center;font-size:10px;opacity:.8}
@media(max-width:850px){.hero{padding-top:75px;padding-bottom:230px}.hero-copy{padding:16px!important}.hero-sticker{width:clamp(120px,29vw,185px)}.hero-art{z-index:2}.hero-sticker-layer{width:100vw}.sticker-hint{bottom:18px}}
@media(prefers-reduced-motion:reduce){.hero-sticker{transition:none}}

.sticker-hint{display:none;z-index:3;top:14px;bottom:auto;background:#faf9f5e8;padding:7px 13px;border-radius:30px;font-size:12px!important;pointer-events:none}
.has-stickers .sticker-hint{display:block}
.hero-sticker:hover{transform:translateY(-5px) rotate(var(--sticker-rotation))}
.hero-sticker.is-dragging{transform:rotate(var(--sticker-rotation)) scale(1.04)}
@media(max-width:850px){.sticker-hint{top:10px;bottom:auto;font-size:11px!important}.sticker-hint span{font-size:9px}}


/* Leave a clear landing area for the interactive stickers. */
.hero .hero-art{width:82%;max-width:420px;justify-self:center}
@media(max-width:850px){.hero .hero-art{width:85%;max-width:380px;margin-inline:auto}}


.hero .hero-art img{height:auto}


.email-reveal{display:inline-block;background:transparent;color:inherit;border:1px solid currentColor;border-radius:5px;padding:5px 10px;cursor:pointer;font:inherit;font-weight:700}
.material .glitter{background:#8c8c91 url("assets/glitter-swatch.svg") center/cover no-repeat}