/* WingORIPA — quiet black & champagne gold storefront direction. */
:root{color:#f4f0e7;background:#090b10}
body{background:radial-gradient(ellipse 72% 45% at 50% -15%,#43331e55,transparent 74%),#090b10;letter-spacing:.012em}
.stripe{background:#c9a75e;color:#1e180f;letter-spacing:.27em;font-size:10px;padding:9px 12px}
.header{background:#0b0d13ed;border-bottom-color:#a887463d}
.headin{padding-top:21px;padding-bottom:21px}
.logo{font-size:29px;font-weight:800;letter-spacing:-.065em}
.logo span{background:linear-gradient(110deg,#b58438,#fff0b5,#c28e43);background-clip:text;-webkit-background-clip:text;color:transparent}
.logo small{font-size:9px;letter-spacing:.28em;color:#b2a891}
.navbtn{background:#151612;border:1px solid #ab8b5277;border-radius:2px;color:#ebd39b;letter-spacing:.07em;padding:12px 19px}
.navbtn:hover,.outline:hover{border-color:#e0bf78;background:#242017}
.wrap{max-width:1220px;padding-top:22px}
.notice{background:#191814;border:1px solid #725e383f;color:#cfc2a6;border-radius:2px;letter-spacing:.04em}
.hero{min-height:410px;margin-top:26px;margin-bottom:62px;border-radius:3px;border:1px solid #ad8a4d7a;background:linear-gradient(95deg,#101117ec 0%,#111119e8 35%,#221b18b5 62%,#3b2a1f66 100%),radial-gradient(circle at 75% 48%,#93683e99 0%,#231b1a 37%,#0c101b 80%);box-shadow:inset 0 0 0 12px #08090e50,0 20px 80px #0006}
.hero::before{content:'';position:absolute;inset:19px;border:1px solid #f1cf8250;pointer-events:none}
.hero::after{right:5%;top:-95px;font-family:Georgia,serif;font-size:430px;font-weight:400;color:#f6d69a;opacity:.085}
.hero h1{font-family:Georgia,'Noto Serif JP',serif;font-weight:600;letter-spacing:.01em;font-size:clamp(38px,6vw,70px);line-height:1.32;margin:23px 0}
.hero h1 span{color:#efcf8b!important}
.hero p{font-size:15px;color:#d9cfbe;letter-spacing:.08em}
.hero .btn{margin-top:14px;min-width:185px}
.eyebrow{color:#e2bd79;letter-spacing:.34em;font-weight:700}
.title{margin-top:45px;margin-bottom:24px}
.title h2{font-family:Georgia,'Noto Serif JP',serif;font-size:30px;font-weight:600;letter-spacing:.025em}
.sub{color:#c2b495;letter-spacing:.05em}
.grid{gap:25px}
.product{background:linear-gradient(155deg,#191b22,#0f131b);border:1px solid #78644159;border-radius:3px;box-shadow:0 14px 40px #0005;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.product:hover{transform:translateY(-4px);border-color:#d7b4759a;box-shadow:0 22px 58px #0008}
.art{height:260px;background:radial-gradient(circle at 50% 36%,#685139,#29232a 50%,#10131d 100%)}
.art::after{content:'';position:absolute;inset:13px;border:1px solid #fff1bb2e;pointer-events:none}
.art .placeholder{font-size:130px;color:#e2bf7a;text-shadow:0 0 60px #f5c67566}
.badge{background:#ddbf7b;color:#241a0f;border-radius:0;top:13px;left:13px;font-size:9px;letter-spacing:.19em;padding:9px 11px}
.content{padding:24px}
.content h3{font-size:19px;font-weight:700;letter-spacing:.015em;min-height:30px}
.price{font-family:Georgia,'Noto Serif JP',serif;font-size:30px;font-weight:700;color:#f5d89a}
.bar{background:#303038;height:4px;margin-top:20px}
.bar div{background:linear-gradient(90deg,#90622b,#f3dfaa)}
.btn{border-radius:2px;background:linear-gradient(115deg,#c2954a 0%,#f6e1a5 48%,#bd893e 100%);letter-spacing:.08em;padding:14px 20px;box-shadow:inset 0 1px #fff8c577}
.btn:hover:not(:disabled){filter:brightness(1.09)}
.outline{border-radius:2px}
.content button{margin-top:20px}
.panel{background:#131720;border:1px solid #88704849;border-radius:3px}
.steps{gap:16px;margin-top:22px}
.step{background:linear-gradient(155deg,#181a20,#10141b);border:1px solid #8570484d;border-radius:3px;padding:23px;letter-spacing:.05em}
.step b{font-family:Georgia,serif;font-size:32px;font-weight:500;margin-bottom:9px}
.dialog{background:#121720;border-color:#b092587d;border-radius:4px;box-shadow:0 25px 110px #000b}
.thumb{border-radius:3px}
.total{border-radius:2px;background:#201e19;border-color:#846b3e}
.foot{border-top-color:#98804c3a;letter-spacing:.08em}
@media(max-width:540px){.stripe{letter-spacing:.12em}.hero{min-height:380px;margin-bottom:45px}.hero::before{inset:12px}.hero h1{font-size:39px}.art{height:240px}.content{padding:19px}.step{padding:17px}}

/* Product thumbnails already contain the headline, price and selling points.
   Let the artwork lead, and keep the ordering UI quiet and compact. */
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));align-items:start;gap:20px}
.product{max-width:420px;width:100%;border-radius:12px;overflow:hidden}
.art{height:auto;aspect-ratio:4/5;background:#0b0d12}
.art img{width:100%;height:100%;object-fit:contain}
.art::after{inset:0;border:0}
.badge{background:#17130de8;color:#f4d58a;border:1px solid #b59a5f;border-radius:3px;font-size:10px;letter-spacing:.1em}
.content{padding:14px 15px 16px}
.content h3{font-size:16px;line-height:1.4;min-height:0;margin:0 0 8px}
.content .price{font-size:21px;line-height:1.3}
.content .price .unit{font-family:-apple-system,BlinkMacSystemFont,'Noto Sans JP',sans-serif;font-size:12px;color:#acacb2;font-weight:500}
.content .bar{margin:12px 0 6px;height:3px}
.content button{margin-top:12px;padding:12px;font-size:13px}
@media(max-width:540px){.grid{grid-template-columns:minmax(0,1fr);justify-items:center}.product{max-width:400px}.art{height:auto;aspect-ratio:4/5}.content{padding:13px 14px 15px}}