@charset "UTF-8";
/* One example shop, five styles. The markup never changes; [data-style] swaps tokens and a few layout rules. */
@font-face{font-family:"Albert Sans";font-weight:400 800;font-display:swap;src:url(/assets/fonts/albert-sans-latin.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-display:swap;src:url(/assets/fonts/dm-serif-display.woff2) format("woff2")}
@font-face{font-family:"Anton";font-display:swap;src:url(/assets/fonts/anton.woff2) format("woff2")}
@font-face{font-family:"Shrikhand";font-display:swap;src:url(/assets/fonts/shrikhand.woff2) format("woff2")}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;font:17px/1.55 "Albert Sans",ui-sans-serif,system-ui,sans-serif;background:#111315;color:#f2f4f5}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid #2fd0e5;outline-offset:3px;border-radius:4px}

/* WebUp bar */
.demo-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:12px clamp(16px,3vw,32px);background:rgba(17,19,21,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #2a2e33;color:#f2f4f5}
.demo-back{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.demo-back img{width:24px}
.demo-styles{display:flex;gap:6px;flex-wrap:wrap;margin-inline:auto}
.demo-styles a{padding:7px 14px;border-radius:999px;font-weight:600;font-size:14px;color:#b0b7bc;box-shadow:inset 0 0 0 1px #41474c;transition:background .2s,color .2s}
.demo-styles a:hover{color:#fff}
.demo-styles a[aria-current="true"]{background:#2fd0e5;color:#05181b;box-shadow:none}
.demo-note{font-size:13px;color:#b0b7bc}

.is-embedded{scroll-padding-top:16px}
.is-embedded .demo-bar{display:none}

/* Shared shop layout */
.shop{
  --bg:#f1e9db;--fg:#2b211a;--muted:#6e5f52;--accent:#8e2c20;--accent2:#1f3a5f;--card:#fbf6ec;--line:#cdbfa9;
  --display:"DM Serif Display",Georgia,serif;--h1:clamp(48px,7.5vw,104px);--h1-weight:400;--h1-track:-.02em;--h1-case:none;--radius:6px;--btn-radius:4px;
  background:var(--bg);color:var(--fg);min-height:100vh;overflow:hidden;
  transition:background-color .5s,color .5s;
}
.shop *{transition:background-color .5s,color .5s,border-color .5s,fill .5s,stroke .5s}
.s-nav{display:flex;align-items:center;gap:24px;padding:22px clamp(18px,5vw,64px);max-width:1280px;margin-inline:auto}
.s-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:26px;letter-spacing:var(--h1-track);text-transform:var(--h1-case);margin-right:auto}
.pole{width:16px;height:42px}
.pole-body{fill:var(--card);stroke:var(--fg);stroke-width:1.5}
.pole-stripes{stroke:var(--accent);stroke-width:3.5;fill:none}
.pole-cap{fill:var(--fg)}
.s-nav nav{display:flex;gap:22px;font-weight:600;font-size:15px}
.s-btn{display:inline-block;background:var(--accent);color:var(--card);font-weight:700;padding:14px 22px;border-radius:var(--btn-radius)}
.s-btn-small{padding:9px 16px;font-size:14px}
.s-btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--fg)}
.s-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(40px,7vw,96px) clamp(18px,5vw,64px);max-width:1280px;margin-inline:auto}
.s-kicker{font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.s-hero h1{font-family:var(--display);font-size:var(--h1);font-weight:var(--h1-weight);line-height:.95;letter-spacing:var(--h1-track);text-transform:var(--h1-case)}
.s-hero h1 span{display:block;color:var(--accent)}
.s-lede{font-size:19px;color:var(--muted);margin:20px 0 28px;max-width:34ch}
.s-actions{display:flex;flex-wrap:wrap;gap:12px}
.s-hero-art{position:relative;display:grid;place-items:center;aspect-ratio:1}
.scissors{width:78%;fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;position:relative;z-index:1}
.scissors .pin{fill:var(--accent)}
.art-word{position:absolute;inset:auto 0 4% 0;text-align:center;font-family:var(--display);font-size:clamp(60px,9vw,130px);line-height:1;color:var(--line);opacity:.35;text-transform:var(--h1-case)}
.s-strip{list-style:none;margin:0;padding:18px clamp(18px,5vw,64px);display:flex;justify-content:center;gap:12px 40px;flex-wrap:wrap;border-block:1px solid var(--line);font-weight:700}
.s-strip li::before{content:"✂";color:var(--accent);margin-right:10px}
.s-prices,.s-visit{max-width:1080px;margin-inline:auto;padding:clamp(48px,7vw,96px) clamp(18px,5vw,64px) 0}
.s-prices h2,.s-visit h2{font-family:var(--display);font-weight:var(--h1-weight);font-size:clamp(34px,4.6vw,56px);letter-spacing:var(--h1-track);text-transform:var(--h1-case);line-height:1;margin-bottom:24px}
.s-board{list-style:none;margin:0;padding:clamp(18px,3vw,32px);background:var(--card);border:3px double var(--line);border-radius:var(--radius);display:grid;gap:14px}
.s-board li{display:flex;align-items:baseline;gap:12px;font-size:clamp(18px,2vw,22px);font-weight:600}
.s-board i{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-5px)}
.s-board b{font-family:var(--display);font-weight:var(--h1-weight);font-size:1.2em;color:var(--accent)}
.s-visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);padding-bottom:clamp(48px,7vw,96px)}
.s-hours{margin:0;display:grid;gap:10px;font-size:18px}
.s-hours div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px}
.s-hours dt{font-weight:700}
.s-hours dd{margin:0;font-variant-numeric:tabular-nums;color:var(--muted)}
.s-address{font-size:20px;font-weight:600;margin-bottom:16px}
.s-map{position:relative;aspect-ratio:16/10;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);overflow:hidden}
.road{position:absolute;background:var(--line);opacity:.7}
.r1{left:-10%;right:-10%;top:55%;height:12px;transform:rotate(-8deg)}
.r2{top:-10%;bottom:-10%;left:38%;width:10px;transform:rotate(12deg)}
.r3{left:55%;right:-10%;top:22%;height:8px;transform:rotate(24deg)}
.pin-mark{position:absolute;left:44%;top:36%;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.s-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:24px clamp(18px,5vw,64px);border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.s-foot a{text-decoration:underline}

/* Bold: black, acid yellow, condensed capitals */
.shop[data-style="bold"]{--bg:#0d0d0d;--fg:#f4f4ef;--muted:#bdbdb4;--accent:#e6ff3d;--card:#171717;--line:#3a3a36;--display:"Anton",Impact,sans-serif;--h1:clamp(72px,14vw,200px);--h1-weight:400;--h1-track:-.01em;--h1-case:uppercase;--radius:0;--btn-radius:0}
.shop[data-style="bold"] .s-hero{grid-template-columns:1fr}
.shop[data-style="bold"] .s-hero h1{line-height:.86}
.shop[data-style="bold"] .s-hero-art{position:absolute;right:-8%;top:150px;width:44%;opacity:.55;pointer-events:none;z-index:0}
.shop[data-style="bold"] .s-hero-copy{position:relative;z-index:1}
.shop[data-style="bold"] .scissors{transform:rotate(-24deg);stroke-width:3}
.shop[data-style="bold"] .art-word{display:none}
.shop[data-style="bold"] .s-btn{color:#0d0d0d;text-transform:uppercase;letter-spacing:.06em}
.shop[data-style="bold"] .s-strip{background:var(--accent);color:#0d0d0d;border:0;font-family:"Anton",sans-serif;font-weight:400;font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.shop[data-style="bold"] .s-strip li::before{content:"✦";color:#0d0d0d}
.shop[data-style="bold"] .s-board{border:0;border-top:4px solid var(--accent);background:transparent;padding-inline:0}
.shop[data-style="bold"] .s-board li{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(24px,3vw,38px)}
.shop[data-style="bold"] .s-board i{border-bottom:3px solid var(--line)}
.shop[data-style="bold"] .s-hero{position:relative}

/* Minimal: white space, thin lines, one red dot */
.shop[data-style="minimal"]{--bg:#ffffff;--fg:#111111;--muted:#666666;--accent:#111111;--card:#ffffff;--line:#e2e2e2;--display:"Albert Sans",system-ui,sans-serif;--h1:clamp(44px,6.4vw,92px);--h1-weight:500;--h1-track:-.05em;--h1-case:none;--radius:0;--btn-radius:999px}
.shop[data-style="minimal"] .s-kicker{color:var(--muted);letter-spacing:.08em}
.shop[data-style="minimal"] .s-kicker::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#e5322d;margin-right:10px}
.shop[data-style="minimal"] .s-hero h1 span{color:var(--muted)}
.shop[data-style="minimal"] .scissors{stroke-width:1.5;width:70%}
.shop[data-style="minimal"] .art-word{display:none}
.shop[data-style="minimal"] .s-btn{color:#fff}
.shop[data-style="minimal"] .s-strip{justify-content:flex-start;font-weight:500;color:var(--muted)}
.shop[data-style="minimal"] .s-strip li::before{content:"·";color:var(--fg)}
.shop[data-style="minimal"] .s-board{border:0;border-top:1px solid var(--fg);padding:0;gap:0}
.shop[data-style="minimal"] .s-board li{padding:16px 0;border-bottom:1px solid var(--line);font-weight:500}
.shop[data-style="minimal"] .s-board i{border:0}
.shop[data-style="minimal"] .s-board b{font-family:inherit;font-weight:500;color:var(--fg);font-size:1em}
.shop[data-style="minimal"] .pole-stripes{stroke:#e5322d}
.shop[data-style="minimal"] .pin-mark{background:#e5322d}

/* Retro: seventies sunburst, chunky script, rounded everything */
.shop[data-style="retro"]{--bg:#f6e3c3;--fg:#4a2615;--muted:#7a4b2e;--accent:#e3622a;--accent2:#f1b33b;--card:#fff4e0;--line:#e2bf8c;--display:"Shrikhand",Georgia,serif;--h1:clamp(46px,7vw,98px);--h1-weight:400;--h1-track:-.01em;--h1-case:none;--radius:28px;--btn-radius:999px}
.shop[data-style="retro"] .s-hero{text-align:center;grid-template-columns:1fr;justify-items:center}
.shop[data-style="retro"] .s-hero-copy{display:grid;justify-items:center}
.shop[data-style="retro"] .s-hero h1 span{color:var(--accent);text-shadow:4px 4px 0 var(--accent2)}
.shop[data-style="retro"] .s-hero-art{order:-1;width:min(300px,70%);border-radius:50%;background:repeating-conic-gradient(var(--accent2) 0 10deg,var(--bg) 10deg 20deg);border:8px solid var(--fg)}
.shop[data-style="retro"] .scissors{stroke:var(--fg);stroke-width:6;width:62%}
.shop[data-style="retro"] .scissors .pin{fill:var(--fg)}
.shop[data-style="retro"] .art-word{display:none}
.shop[data-style="retro"] .s-btn{box-shadow:0 5px 0 var(--fg)}
.shop[data-style="retro"] .s-btn-ghost{box-shadow:inset 0 0 0 3px var(--fg),0 5px 0 var(--fg);background:var(--card)}
.shop[data-style="retro"] .s-strip{border:0;gap:12px}
.shop[data-style="retro"] .s-strip li{background:var(--accent2);padding:8px 18px;border-radius:999px}
.shop[data-style="retro"] .s-strip li:nth-child(2){background:var(--accent);color:var(--card)}
.shop[data-style="retro"] .s-strip li:nth-child(3){background:#2f6b5e;color:var(--card)}
.shop[data-style="retro"] .s-strip li::before{content:none}
.shop[data-style="retro"] .s-board{border:4px solid var(--fg);background:linear-gradient(var(--accent) 0 10px,var(--accent2) 10px 20px,var(--fg) 20px 30px,var(--card) 30px);padding-top:48px}
.shop[data-style="retro"] .s-prices h2,.shop[data-style="retro"] .s-visit h2{color:var(--accent)}

/* Neon: a night-time sign, glowing pink and cyan */
.shop[data-style="neon"]{--bg:#0b0820;--fg:#f3eaff;--muted:#b9addb;--accent:#ff3fb4;--accent2:#33e1ff;--card:#140f33;--line:#3a2f6e;--display:"Albert Sans",system-ui,sans-serif;--h1:clamp(50px,8vw,116px);--h1-weight:800;--h1-track:-.04em;--h1-case:none;--radius:16px;--btn-radius:999px}
.shop[data-style="neon"] .s-hero h1{font-style:italic;text-shadow:0 0 18px rgba(255,63,180,.35)}
.shop[data-style="neon"] .s-hero h1 span{color:var(--accent2);text-shadow:0 0 8px var(--accent2),0 0 28px rgba(51,225,255,.6)}
.shop[data-style="neon"] .scissors{stroke:var(--accent);stroke-width:3.5;filter:drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 18px var(--accent));animation:flicker 3s steps(1) 1}
.shop[data-style="neon"] .art-word{color:var(--accent2);opacity:.9;font-family:"Albert Sans",sans-serif;font-weight:800;font-style:italic;-webkit-text-stroke:0;text-shadow:0 0 10px var(--accent2),0 0 30px rgba(51,225,255,.6);font-size:clamp(40px,6vw,84px)}
.shop[data-style="neon"] .s-btn{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--accent),0 0 18px rgba(255,63,180,.5)}
.shop[data-style="neon"] .s-btn-ghost{box-shadow:inset 0 0 0 2px var(--accent2),0 0 18px rgba(51,225,255,.4)}
.shop[data-style="neon"] .s-strip li::before{color:var(--accent2)}
.shop[data-style="neon"] .s-board{border:2px solid var(--accent2);box-shadow:0 0 24px rgba(51,225,255,.25),inset 0 0 24px rgba(51,225,255,.12)}
.shop[data-style="neon"] .s-board b{color:var(--accent2);text-shadow:0 0 10px var(--accent2)}
.shop[data-style="neon"] .pole-body{fill:var(--card);stroke:var(--accent2)}
.shop[data-style="neon"] .pole-cap{fill:var(--accent2)}
.shop[data-style="neon"] .pin-mark{box-shadow:0 0 16px var(--accent)}
/* Ghost buttons keep the text colour in every style */
.shop[data-style] .s-btn-ghost{color:var(--fg)}
.shop[data-style="neon"] .s-btn{color:var(--fg)}
@keyframes flicker{0%{opacity:1}6%{opacity:.2}10%{opacity:1}16%{opacity:.4}20%{opacity:1}}

@media (max-width:760px){
  .demo-note{width:100%;text-align:center}
  .demo-styles{width:100%;justify-content:center}
  .demo-back span{display:none}
  .s-nav nav{display:none}
  .s-hero,.s-visit{grid-template-columns:1fr}
  .s-hero-art{width:min(260px,70%);justify-self:center}
  .shop[data-style="bold"] .s-hero-art{position:relative;right:auto;top:auto;width:60%;order:-1}
  html{scroll-padding-top:150px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shop,.shop *{transition:none!important;animation:none!important}
}